Jquery working on first select box, but copied code doesn't work on second

Question

I am using the following to pull records from my mysql database using ajax. It then works out the line totals for each by multiplying the qty box by the priceeach. The problem I'm having is the first select works, but the second one doesn't, and in the console I am getting the following error message:

  Uncaught ReferenceError: change is not defined on line 97

which is this line :

                    options += data[x]['priceeach']; 
                } // <-- This Line
                $('#priceeach1').text(options);
            });
        });

of this script:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $('#stock1').on('change', function (){
            $('#qty1').val('');
            $('#linetotal1').text('');
            var newValue1 = $.getJSON('select2.php', {stockID: $(this).val()}, function(data){
                var options = '';
                for (var x = 0; x < data.length; x++) { 
                    options += data[x]['priceeach']; 
                }
                $('#priceeach1').text(options);
            });
        });
        $('#qty1').on('keyup', function (){
            var qty1 = $("#qty1").val();
            var priceeach1 =  $("#priceeach1").html();
            var total=parseFloat(priceeach1)  * parseInt(qty1);
            $('#linetotal1').html(total);
        });

        $('#stock2').on('change', function (){
            $('#qty2').val('');
            $('#linetotal2').text('');
            var newValue2 = $.getJSON('select2.php', {stockID: $(this).val()}, function(data){
                var options = '';
                for (var x = 0; x < data.length; x++) { 
                    options += data[x]['priceeach']; 
                }
                $('#priceeach2').text(options);
            });
        });
        $('#qty2').on('keyup', function (){
            var qty2 = $("#qty2").val();
            var priceeach2 =  $("#priceeach2").html();
            var total2=parseFloat(priceeach2)  * parseInt(qty2);
            $('#linetotal2').html(total2);
        });
    });
</script>

Following is the PHP/HTML:

<select id="customer">
    <option>Please Select / Search For A Customer</option>
    <?php
        $sql = <<<SQL
            SELECT *
            FROM `customers`
            SQL;
        if(!$result = $db->query($sql)){ die('There was an error running the query [' . $db->error . ']');}
        while($row = $result->fetch_assoc()){
            if ($row['bussinessname'] == ''){$name = $row['title'].' '.$name = $row['firstname'].' '.$name = $row['surname'];}
            else {$name = $row['bussinessname'];}
            echo '<option value="'.$row['customerID'].'">'.$name.'</option>';
        }
        echo '</select>';
    ?>
<br>
<br>
<select id="vehicle">
    <option>Select A Customers Vehicle</option>
</select>
<br>
<br>
<div class="stock1">
    <select id="stock1">
        <option>Please Select / Search For Stock</option>
        <?php
            $sql2 = <<<SQL
                SELECT *
                FROM `stock`
                SQL;
            if(!$result2 = $db->query($sql2)){ die('There was an error running the query [' . $db->error . ']');}
            while($row2 = $result2->fetch_assoc()){
                $instock = $row2['numberofstock'] - $row2['numberofstocksold'];
                if ($row2['numberofstocksold'] >= $row2['numberofstock']){$stockinfo = '';}
                else {$stockinfo = $row2['make'].' '.$row2['model'].' - '.$row2['tyrewidth'].'/'.$row2['tyreprofile'].'/'.$row2['tyresize'].'/'.$row2['tyrespeed'].'/'.$row2['tyreload'].' - ('.$instock.' In Stock) - £'.$row2['priceeach'].' Each';}
                echo '<option value="'.$row2['stockID'].'">'.$stockinfo.'</option>';
            }
        ?>
    </select>   X
    <input style="width:40px;" type="text" name="qty1" id="qty1" />
    <span style="display:none;"  id="priceeach1"></span>
    - Line Total : &pound;<span id="linetotal1"></span>
</div>
<div class="stock2">
    <select id="stock2">
        <option>Please Select / Search For Stock</option>
        <?php
            $sql3 = <<<SQL
                SELECT *
                FROM `stock`
                SQL;
            if(!$result3 = $db->query($sql3)){ die('There was an error running the query [' . $db->error . ']');}
            while($row3 = $result3->fetch_assoc()){
                $instock = $row3['numberofstock'] - $row3['numberofstocksold'];
                if ($row3['numberofstocksold'] >= $row3['numberofstock']){$stockinfo = '';}
                else {$stockinfo = $row3['make'].' '.$row3['model'].' - '.$row3['tyrewidth'].'/'.$row3['tyreprofile'].'/'.$row3['tyresize'].'/'.$row3['tyrespeed'].'/'.$row3['tyreload'].' - ('.$instock.' In Stock)';}
                echo '<option value="'.$row3['stockID'].'">'.$stockinfo.'</option>';
            }
        ?>
    </select>   X
    <input style="width:40px;" type="text" name="qty2" id="qty2" />
    <span style="display:none;"  id="priceeach2"></span>  - 
    Line Total : &pound;<span id="linetotal2"></span>   
</div>
<div class="stock3">
    <select id="stock3">
        <option>Please Select / Search For Stock</option>
        <?php
            $sql4 = <<<SQL
                SELECT *
                FROM `stock`
                SQL;
            if(!$result4 = $db->query($sql4)){ die('There was an error running the query [' . $db->error . ']');}
            while($row4 = $result4->fetch_assoc()){
                $instock = $row4['numberofstock'] - $row4['numberofstocksold'];
                if ($row4['numberofstocksold'] >= $row4['numberofstock']){$stockinfo = '';}
                else {$stockinfo = $row4['make'].' '.$row4['model'].' - '.$row4['tyrewidth'].'/'.$row4['tyreprofile'].'/'.$row4['tyresize'].'/'.$row4['tyrespeed'].'/'.$row4['tyreload'].' - ('.$instock.' In Stock)';}
                echo '<option value="'.$row4['stockID'].'">'.$stockinfo.'</option>';
            }
        ?>
    </select>   X 
    <input style="width:40px;" type="text" name="qty3" id="qty3" />
    <span style="display:none;"  id="priceeach3"></span>  - 
    Line Total : &pound;<span id="linetotal3"></span>       
</div>
<div class="stock4">
    <select id="stock4">
        <option>Please Select / Search For Stock</option>
        <?php
            $sql5 = <<<SQL
                SELECT *
                FROM `stock`
                SQL;
            if(!$result5 = $db->query($sql5)){ die('There was an error running the query [' . $db->error . ']');}
            while($row5 = $result5->fetch_assoc()){
                $instock = $row5['numberofstock'] - $row5['numberofstocksold'];
                if ($row5['numberofstocksold'] >= $row5['numberofstock']){$stockinfo = '';}
                else {$stockinfo = $row5['make'].' '.$row5['model'].' - '.$row5['tyrewidth'].'/'.$row5['tyreprofile'].'/'.$row5['tyresize'].'/'.$row5['tyrespeed'].'/'.$row5['tyreload'].' - ('.$instock.' In Stock)';}
                echo '<option value="'.$row5['stockID'].'">'.$stockinfo.'</option>';
            }
        ?>
    </select>   X 
    <input style="width:40px;" type="text" name="qty4" id="qty4" />
    <span style="display:none;"  id="priceeach4"></span>  - 
    Line Total : &pound;<span id="linetotal4"></span>       
</div>
<div class="stock5">
    <select id="stock5">
        <option>Please Select / Search For Stock</option>
        <?php
            $sql6 = <<<SQL
                SELECT *
                FROM `stock`
                SQL;
            if(!$result6 = $db->query($sql6)){ die('There was an error running the query [' . $db->error . ']');}
            while($row6 = $result6->fetch_assoc()){
                $instock = $row6['numberofstock'] - $row6['numberofstocksold'];
                if ($row6['numberofstocksold'] >= $row6['numberofstock']){$stockinfo = '';}
                else {$stockinfo = $row6['make'].' '.$row6['model'].' - '.$row6['tyrewidth'].'/'.$row6['tyreprofile'].'/'.$row6['tyresize'].'/'.$row6['tyrespeed'].'/'.$row6['tyreload'].' - ('.$instock.' In Stock)';}
                echo '<option value="'.$row6['stockID'].'">'.$stockinfo.'</option>';
            }
        ?>
    </select>   X 
    <input style="width:40px;" type="text" name="qty5" id="qty5" />
    <span style="display:none;"  id="priceeach5"></span>  - 
    Line Total : &pound;<span id="linetotal5"></span>       
</div>

Answer 1

The problem is that the $('#stock1') (or perhaps $('#stock2')) object does not have the change method, which is limited to <input> elements, <textarea> boxes, and <select> elements.

(BTW, your code should really be refactored. You have two nearly identical functions that could easily be reduced down to one.)

You might consider using the following refactored code:

$(document).ready(function () {

    $('select[id^="stock"]').on('change', function () {
        var index = this.id.replace('stock', '');
        $('#qty' + index).val('');
        $('#linetotal' + index).text('');
        $.getJSON('select2.php', {stockID: $(this).val()}, function (data) {
            var options = '',
                x;
            for (x = 0; x < data.length; x += 1) { 
                options += data[x].priceeach; 
            }
            $('#priceeach' + index).text(options);
        });
    });
    $('input[id^="qty"]').on('keyup', function () {
        var index = this.id.replace('qty', ''),
            qty = $(this).val(),
            priceeach =  $('#priceeach' + index).text(),
            total = parseFloat(priceeach) * parseInt(qty, 10);
        $('#linetotal' + index).text(total);
    });
});