I would like to customise the Stock level/out of stock

Question

Can someone please help me with this js?
I would like to customise the Stock level/out of stock.
<script type="text/javascript">
jQuery(document).ready(function(){
var productName = jQuery('.details h5').text();
    jQuery('.main-frame p.breadcrumbs').append("<span> : " + productName + "</span>");
jQuery(document).ready(function(){
    jQuery('#zoom img').wrap('<span style="display:inline-block"></span>').css('display', 'block').parent().zoom({on:'click'});
    function AddProductExtras(catalogId,productId,ret) {
          var td = document.getElementById('catProdTd_'+productId);
          if (td.innerHTML == 'This item is made to order - please allow 3 to 5 weeks for delivery')
             td.innerHTML = 'Product added successfully. Please allow 2 - 3 days for delivery.';
</script>
<div class="shop-product-large clear">
<div class="image">
<p>
<a href="#" id="zoom">
<span style="cursor: move;"><img alt="" src="{tag_largeimage_path}" width="600" height="360" /></span>
</a></p>
{tag_relatedproducts,2,true}
</div>
<div class="details">
<br />
<h5>{tag_name}</h5>
<h4>{tag_custom3}</h4>
<br />
<div class="description">
<p2>{tag_description}
<br />
<br />
<p5>Size:</p5>
{tag_custom1}
<br/>
<p5>Colour:</p5>
{tag_custom2}
<br/>
<p5>Materials:</p5>
{tag_custom4}</p2>
</div>
<ul>
    <li class="price"><strong>{tag_saleprice} <h9>(inc. GST)</h9></strong></li>
    <li class="instock"><p5>In Stock:</p5> <p2>{tag_instock}</p2></li>
    <li class="quantity"><p5>Quantity:</p5> {tag_addtocartinputfield}</li><br/>
    <li class="quantity">{tag_addtocart,<img alt="" src="/images/btn-add-cart.gif" />}</li>
    </ul>
</div>
</div>

Answer 1

I have amended to;
<script type="text/javascript">
jQuery(document).ready(function(){
var productName = jQuery('.details h5').text();
    jQuery('.main-frame p.breadcrumbs').append("<span> : " + productName + "</span>");
jQuery(document).ready(function(){
    jQuery('#zoom img').wrap('<span style="display:inline-block"></span>').css('display', 'block').parent().zoom({on:'click'});
jQuery(document).ready(function AddProductExtras(catalogId,productId,ret) {
          var td = document.getElementById('catProdTd_'+productId);
          if (td.innerHTML == 'This item is made to order - please allow 3 to 5 weeks for delivery')
             td.innerHTML = 'Product added successfully. Please allow 2 - 3 days for delivery.';
</script>
<div class="shop-product-large clear">
<div class="image">
<p>
<a href="#" id="zoom">
<span style="cursor: move;"><img alt="" src="{tag_largeimage_path}" width="600" height="360" /></span>
</a></p>
{tag_relatedproducts,2,true}
</div>
<div class="details">
<br />
<h5>{tag_name}</h5>
<h4>{tag_custom3}</h4>
<br />
<div class="description">
<p2>{tag_description}
<br />
<br />
<p5>Size:</p5>
{tag_custom1}
<br/>
<p5>Colour:</p5>
{tag_custom2}
<br/>
<p5>Materials:</p5>
{tag_custom4}</p2>
</div>
<ul>
    <li class="price"><strong>{tag_saleprice} <h9>(inc. GST)</h9></strong></li>
    <li class="instock"><p5>In Stock:</p5> <p2>{tag_instock}</p2></li>
    <li class="quantity"><p5>Quantity:</p5> {tag_addtocartinputfield}</li><br/>
    <li class="quantity">{tag_addtocart,<img alt="" src="/images/btn-add-cart.gif" />}</li>
    </ul>
</div>
</div>
but still not working