I am the web and tech manager at a boat dealership. Each product page of our website has several tabs. The main tab is the description. One of the important tabs has our PDI (Dealer Prep) and DF (Destination Fee) on it. These are very important fees that need to be displayed on the Description tab, also. Our previous/original developer created a box on the Description tab and using jQuery to "append" the fees/text into the box. The code is messy and instead of creating the fee box in html and using javascript to just add in the numbers, much of the boxes other text is baked into the javascript code. Like I said in the title, I understand what javascript is used for, but I don't really know how to use it outside of things like Lightbox and an Image Carousel.

Background of my site: we use BigCommerce's platform, which uses PHP.

What I want to do, is create my box with my text information about the fees in html outside of any javascript and just have javascript add in basically two numbers (ex PDI: $400 DF: $750)

Here is a link to a product page on my site: Click here

The fees are located in the "More Details" tab.

Here is the code from my product page's layout: (I have the script turned off right now because it doesn't work, as you can see)

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/">
%%Panel.HTMLHead%%
<body>
    <script type="text/javascript" src="%%GLOBAL_AppPath%%/javascript/jquery/plugins/validate/jquery.validate.js?%%GLOBAL_JSCacheToken%%"></script>
    <script type="text/javascript" src="%%GLOBAL_AppPath%%/javascript/product.functions.js?%%GLOBAL_JSCacheToken%%"></script>
    <script type="text/javascript" src="%%GLOBAL_AppPath%%/javascript/product.js?%%GLOBAL_JSCacheToken%%"></script>
    <div id="Container">
    %%Panel.Header%%
    <div id="Wrapper">
        %%Panel.WrapperBanner%%       
        <div class="Left" id="LayoutColumn1">
            %%Panel.SideCategoryList%%
            %%Panel.SideNewProducts%%
            %%Panel.SideNewsletterBox%%
            %%Panel.SideLiveChatServices%%
        </div>
        <div class="Content" id="LayoutColumn2">            
            <div id="quote">
            <a href="/request-a-quote/" onmouseover="document.quotebutton.src='https://store-5a502.mybigcommerce.com/product_images/uploaded_images/request-a-quote-button-down-.png';" onmouseout="document.quotebutton.src='https://store-5a502.mybigcommerce.com/product_images/uploaded_images/request-a-quote-button-up-.png';"><img style="float:right;padding-top:5px;margin-bottom:5px;margin-right:-10px;" src="https://store-5a502.mybigcommerce.com/product_images/uploaded_images/request-a-quote-button-up-.png" name="quotebutton" /></a>
        </div>
            %%Panel.ProductBreadcrumb%%
            %%Panel.ProductDetails%%
            %%Panel.ProductTabs%%
            %%Panel.ProductDescription%%
            %%Panel.ProductVideos%%
            %%Panel.ProductWarranty%%
            %%Panel.ProductOtherDetails%%
            %%Panel.SimilarProductsByTag%%
            %%Panel.ProductByCategory%%
            %%Panel.ProductVendorsOtherProducts%%
            %%Panel.SimilarProductsByCustomerViews%%
            
        </div>
        <div class="Right" id="LayoutColumn3">
            %%Panel.SideCurrencySelector%%
            %%Panel.SideProductAddToWishList%%
            %%Panel.SideProductRelated%%
            %%Panel.SideProductRecentlyViewed%%
        </div>
        <br class="Clear" />
    </div>       
    %%Panel.Footer%%
</div>   
<!---Here is my problem below---> 
<!---<script>
        $(document).ready(function(){
            var otherDetails = $('#ProductTabs #ProductOtherDetails_Tab');
            if ( otherDetails.length){
                $('#ProductOtherDetails .ProductDetailsGrid .DetailRow').each(function() {
                  var shipsTruck = $('#ProductOtherDetails .ProductDetailsGrid .Value').html();
                  if ("shipsTruck:contains('truck')") {
                      var checkEstimate = 'true';
                    $('.productAddToCartRight').append('<p style="margin-left:140px;"><strong><em>This product ships by truck only. <a href="#shippingInfo">See shipping notes</a> below for more information.</em></strong></p>');
                    $('.ProductDescription, .ProductOtherDetails').append('<div id="shippingInfo">' <p><strong>NOTE:</strong>THIS PRODUCT CANNOT SHIP STANDARD GROUND. It must be shipped via a boat hauler, hand delivered by company personnel, or through a professional freight company and requires special handling and prepping to ship. Please e-mail <a href="mailto:ibs@inflatableboats.net">ibs@inflatableboats.net</a> for a valid shipping and handling cost estimate.</p>
    <p><strong>PLEASE NOTE:</strong></p>
    <p>The price displayed above is the base selling price for the boat and Motor ONLY.</p>
    <p class="pdifee"><strong>PDI (Dealer Prep and Testing) includes the following: Validates all warranties, fill fluids in outboard, complete system check, install AGM Marine battery, electrical check, test run, sea trial:</strong></p>
    <p class="dffee"><strong>Destination Fee (Freight in to Inflatable Boat Specialists Warehouse): </strong></p></div>');
                    return false;
                  }
                });
 for(var index = 0; index < $('#ProductOtherDetails .ProductDetailsGrid .DetailRow').length; index++){
                    var thisOther = $('#ProductOtherDetails .ProductDetailsGrid .DetailRow .Label').eq(index).html();                    
                    if (thisOther == 'PDI') {
                        var estimateCost = $('#ProductOtherDetails .ProductDetailsGrid .DetailRow .Value').eq(index).html();
                        if (estimateCost) {
                            $('.pdifee').append(estimateCost);
                        } else {
                            $('.pdifee').append('call');
                        }
                    }
                }
for(var index = 0; index < $('#ProductOtherDetails .ProductDetailsGrid .DetailRow').length; index++){
                    var thisOther = $('#ProductOtherDetails .ProductDetailsGrid .DetailRow .Label').eq(index).html();                    
                    if (thisOther == 'DF') {
                        var estimateCost = $('#ProductOtherDetails .ProductDetailsGrid .DetailRow .Value').eq(index).html();
                        if (estimateCost) {
                            $('.dffee').append(estimateCost);
                        } else {
                            $('.dffee').append('call');
                        }
                        return false;
                    }
                }
            }
        });
</script>--->
</body>
</html>
Thanks guys. Sorry for the huge post. I know I am rather new to this forum for such a large post. I found it very hard to search for an answer to my problem.