Jquery script loaded multiple times with different id's how to get preloader to only load on the specific id post
<p>I have this script + load of other function loaded multiple times and each time it's loaded it receives a unique number to the formID and script so that when the post script is requested it only loads that specific form detail.</p>

<p>Now the problem that i have is that this script is loaded 6 times with different id's allocated but the preloader seems to be loading through out the page, and not targeted to one preloader class.</p>

<p>The script works perfect in other ways as in it only refreshes the data of that specific id but it just shows all the preloader images through out the site and not just that specific one which has the same id.</p>

<p>You can see the problem on the following link if you change the colour of the Pacific 200 all the preloaders activate</p>

<p><a href="http://www.roofracks.co.uk/thule/Roof+Box+and+Car+Roof+Pod/Thule+New+Pacific+100+200+500+600+700+780+Black+Grey/" rel="nofollow">http://www.roofracks.co.uk/thule/Roof+Box+and+Car+Roof+Pod/Thule+New+Pacific+100+200+500+600+700+780+Black+Grey/</a></p>

<p>Here is the script</p>

<pre><code>&lt;script&gt;
$(document).ready(function() {
    $('.preloader&lt;?php echo $i; ?&gt;').ajaxStart(function(){
    $(this).show();}).ajaxStop(function(){
    $(this).hide();
});     
    $.post('http://www.url.co.uk/template_load/get_box_prices.php', $("#productBox&lt;?php echo $i; ?&gt;").serialize(),
        function(data){
            $('input[id=productID&lt;?php echo $i; ?&gt;]').val(data.productID);
            $('input[id=productDescription&lt;?php echo $i; ?&gt;]').val(data.productDescription);
            $('input[id=productPrice&lt;?php echo $i; ?&gt;]').val(data.productPrice);
            $('input[id=productThumb&lt;?php echo $i; ?&gt;]').val(data.productThumb);
            $('input[id=productThumbLarge&lt;?php echo $i; ?&gt;]').val(data.productThumbLarge);
            $('input[id=packageQuantity&lt;?php echo $i; ?&gt;]').val(data.packageQuantity);
            $('#productSinglePrice&lt;?php echo $i; ?&gt;').html(data.productSinglePrice);
            $('#productSmallbanner&lt;?php echo $i; ?&gt;').html(data.productSmallbanner);
            $('#productWording&lt;?php echo $i; ?&gt;').html(data.productWording);
            $('#productVisableDescription&lt;?php echo $i; ?&gt;').html(data.productVisableDescription);
            console.log(data);
        },'json');
    $("select#productIDColor&lt;?php echo $i; ?&gt;").change(function(){
        $('.productSinglePrice&lt;?php echo $i; ?&gt;').empty();
        $.post('http://www.url.co.uk/template_load/get_box_prices.php', $("#productBox&lt;?php echo $i; ?&gt;").serialize(),
            function(data){
                $('input[id=productID&lt;?php echo $i; ?&gt;]').val(data.productID);
                $('input[id=productDescription&lt;?php echo $i; ?&gt;]').val(data.productDescription);
                $('input[id=productPrice&lt;?php echo $i; ?&gt;]').val(data.productPrice);
                $('input[id=productThumb&lt;?php echo $i; ?&gt;]').val(data.productThumb);
                $('input[id=productThumbLarge&lt;?php echo $i; ?&gt;]').val(data.productThumbLarge);
                $('input[id=packageQuantity&lt;?php echo $i; ?&gt;]').val(data.packageQuantity);
                $('#productSinglePrice&lt;?php echo $i; ?&gt;').html(data.productSinglePrice);
                $('#productSmallbanner&lt;?php echo $i; ?&gt;').html(data.productSmallbanner);
                $('#productWording&lt;?php echo $i; ?&gt;').html(data.productWording);
                $('#productVisableDescription&lt;?php echo $i; ?&gt;').html(data.productVisableDescription);
        },'json');
        return false;

            });                         
});
&lt;/script&gt;
</code></pre>

<p>This is a sample element where the preloader will load contents.</p>

<pre><code>&lt;?php

if (${dynamic_boxes_.$i} == "yes")
{
echo '&lt;table&gt;&lt;tr&gt;&lt;td&gt;';
echo '&lt;div class="preloader' . $i . '"&gt;&lt;img src="http://www.url.co.uk/template_load/img/ajax-loader.gif" /&gt;&lt;/div&gt;';
echo '&lt;div id="productSmallbanner' . $i . '"&gt;&lt;div&gt;';
echo '&lt;/td&gt;&lt;/tr&gt;';
echo '&lt;tr&gt;&lt;td&gt;';
echo '&lt;div class="preloader' . $i . '"&gt;&lt;img src="http://www.url.co.uk/template_load/img/ajax-loader.gif" /&gt;&lt;/div&gt;';
echo '&lt;div id="productWording' . $i . '"&gt;&lt;div&gt;';
echo '&lt;/td&gt;&lt;/tr&gt;';
echo '&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
}
?&gt;
</code></pre>

<p>And this is the form that gets triggered.</p>

<pre><code>if (${dynamic_boxes_.$i} == "yes"){
$color[$i] = mysql_query("SELECT * FROM products_prices WHERE product='".$p[$i]."' ORDER BY color ASC",$connect) or die(mysql_error());

        echo '&lt;form name="productBox' . $i . '" id="productBox' . $i . '" action="" method="POST"&gt; 
                &lt;label for="productIDColor' . $i . '"&gt;Select Colour&lt;/label&gt; 
                &lt;select name="productIDColor' . $i . '" id="productIDColor' . $i . '"&gt;';

        while($colors[$i] = mysql_fetch_array($color[$i]))
        {
            if ($colors[$i]['color'] == "B"){$colorName = "Black";}
            elseif ($colors[$i]['color'] == "S"){$colorName = "Silver";}
            elseif ($colors[$i]['color'] == "T"){$colorName = "Titan";}
            echo '&lt;option value="'.$p[$i].','.$colors[$i]['color'].'"&gt;'.$colorName.'&lt;/option&gt;'; 
        }
        echo '&lt;input type="hidden" name="i" value="'.$i.'" /&gt;';
        echo '&lt;/select&gt;&lt;/form&gt;';
</code></pre>
