dynamic id selector not being called or instantiate

Question

I am creating a jquery function, when I add new <tr id="select_row"> this tag with id will increase by one for example select_row1, select_row2, select_row3.

After the row has been increased I try to click on the checkbox but it does not trigger below as well as changing the value where id is #single_price0 and #total_price0

if ( ((meat_length == 1)&&(vege_length == 2)) || ((meat_length == 1)&&(vege_length == 1)) ) {};

var list = $('#add_order_table');
var initial = 0;

    list.click(function(){


    html  = '<tr id="select-row'+initial+'">';
        html += '<td class="col-md-7">';
        //meat
        html += '<div class="col-md-6">';
        html += '<div class="checkbox"><label><input type="checkbox" name="meat'+initial+'[]" class="meat"> Black Pepper Fried Chicken</label></div>';
        html += '<div class="checkbox"><label><input type="checkbox" name="meat'+initial+'[]" class="meat"> Pineapple Pork</label></div>';
        html += '<div class="checkbox"><label><input type="checkbox" name="meat'+initial+'[]" class="meat"> Bitter Gourd with Dash Fish</label></div>';
        html += '</div>';

        //vege
        html += '<div class="col-md-6">';
        html += '<div class="checkbox"><label><input type="checkbox" name="vege'+initial+'[]" class="vege"> Garlic Bayam</label></div>';
        html += '<div class="checkbox"><label><input type="checkbox" name="vege'+initial+'[]" class="vege"> Oyster Young Pakchoy</label></div>';
        html += '</div>';

        html += '</td>';
        html += '<td class="col-md-1 text-center"><b><p>RM <span id="single_price'+initial+'">0.00</span></p><b></td>';
        html += '<td class="col-md-2"><p><input id="qty'+initial+'"type="text" value="" name="demo" class="text-center qty_spinner"></p></td>';
        html += '<td class="col-md-1 text-center"><b><p>RM <span id="total_price'+initial+'">0.00</span></p><b></td>';          
        html += '<td class="col-md-1 text-center"><p><button type="button" class="btn btn-danger" onclick="$(\'#select-row' + initial + '\').remove();">';
            html += '<span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>';
        html += '</button></p></td>';
    html += '</tr>';        

    $('#order_table tbody').append(html);

    $('.qty_spinner').TouchSpin({
        initval: 1,
        min:1,
        max:50,
        buttondown_class: 'btn btn-danger',
        buttonup_class: 'btn btn-primary',
    });

    var row =  $("#select-row"+initial);
    row.on('change',function(e){

        var meat_length = $('input[class="meat"]:checked').length;
        var vege_length = $('input[class="vege"]:checked').length;

        if (meat_length == 0 || vege_length == 0) {
            $("#single_price"+initial).text("0.00");
            $("#total_price"+initial).text("0.00");
        };

        // 5.50 meal function
        if ( ((meat_length == 1)&&(vege_length == 2)) || ((meat_length == 1)&&(vege_length == 1)) ) {
            // set single price without parsing
            $("#single_price"+initial).text("5.50");
            //get single price with parsing
            var single1 = parseFloat($("#single_price"+initial).text()).toFixed(2);
            // get quantity value 
            var qty1 = parseInt($("#single_qty"+initial).val());
            //single price multiply 
            var total = parseFloat(single1*qty1).toFixed(2);
            $("#total_price"+initial).text(total);          
        };

        // 6.00 meal function
        if ( ((meat_length == 2)&&(vege_length == 1)) || (meat_length == 2) ) {
            // set single price without parsing
            $("#single_price"+initial).text("6.00");
            //get single price with parsing
            var single1 = parseFloat($("#single_price"+initial).text()).toFixed(2);
            // get quantity value 
            var qty1 = parseInt($("#single_qty"+initial).val());
            //single price multiply 
            var total = parseFloat(single1*qty1).toFixed(2);
            $("#total_price"+initial).text(total);          
        };

    });


    initial++;
});

Answer 1

Wrap initial in a function, so it preserves the increment within the change function:

(function(initial) {
    var row =  $("#select-row"+initial);
    row.on('change',function(e){

    var meat_length = $('input[class="meat"]:checked').length;
    var vege_length = $('input[class="vege"]:checked').length;

    if (meat_length == 0 || vege_length == 0) {
        $("#single_price"+initial).text("0.00");
        $("#total_price"+initial).text("0.00");
    };

    // 5.50 meal function
    if ( ((meat_length == 1)&&(vege_length == 2)) || ((meat_length == 1)&&(vege_length == 1)) ) {
        // set single price without parsing
        $("#single_price"+initial).text("5.50");
        //get single price with parsing
        var single1 = parseFloat($("#single_price"+initial).text()).toFixed(2);
        // get quantity value 
        var qty1 = parseInt($("#single_qty"+initial).val());
        //single price multiply 
        var total = parseFloat(single1*qty1).toFixed(2);
        $("#total_price"+initial).text(total);          
    };

    // 6.00 meal function
    if ( ((meat_length == 2)&&(vege_length == 1)) || (meat_length == 2) ) {
        // set single price without parsing
        $("#single_price"+initial).text("6.00");
        //get single price with parsing
        var single1 = parseFloat($("#single_price"+initial).text()).toFixed(2);
        // get quantity value 
        var qty1 = parseInt($("#single_qty"+initial).val());
        //single price multiply 
        var total = parseFloat(single1*qty1).toFixed(2);
        $("#total_price"+initial).text(total);          
    };

    });
})(initial);