JQuery爲不同的行獲取選定的選項值

Question

我對於不同的行選定的選項值有問題。我成功地獲得了第一排的價值。我想要做的是不同的行項目有不同的價格。

我以前關於「爲添加行的JQuery獲取選定的期權價值」的問題已經得到解決：Here

現在，我拿出另一個問題是，以獲得不同的行不同的價值。圖片樣品是像下面

My problem sample screenshot

下面是我的JS代碼：

var i=$('table tr').length; 
 
$(".tambah_sofa").on('click',function(){ 
 
    /* add new row function start here */ 
 
    html = '<tr id="row_'+i+'">'; 
 
    html += '<td><button type="button" id="delete-button" data-row-delete="row_'+i+'">X</button></td>'; 
 
    html += '<td><select id="sofa_'+i+'"><option value="10">hai</option><option value="20">20</option> <option value="50">50</option></select></td>'; 
 
    html += '<td>X</td>'; 
 
    html += '<td><input type="number" name="quantity[]" id="quantity_'+i+'" value="1" disabled="disabled"></td>'; 
 
    html += '</tr>'; 
 
    sidebar = '<tr id="row_'+i+'">'; 
 
    sidebar += '<td><input style="width:50%;" name="sofa'+i+'" type="text" id="price_sofa'+i+'" value="" disabled="disabled"></td>'; 
 
    sidebar += '</tr>'; 
 
    $('#table_item').append(html); 
 
    $('#table_sidebar').append(sidebar); 
 

 
    /* Get selected option value start here */ 
 
    $('body').on('change', '#sofa_'+i+'', function() { 
 
    $('#price_sofa'+i+'').val($(this).find('option:selected').val()); 
 
    }); 
 
    /* Get selected option value end here */ 
 
    i++; 
 
});

Answer 1

var i = $('table tr').length; 
$(".tambah_sofa").on('click', function() { 
    /* add new row function start here */ 
    html = '<tr id="row_' + i + '">'; 
    html += '<td><button type="button" id="delete-button" data-row-delete="row_' + i + '">X</button></td>'; 
    html += '<td><select id="sofa_' + i + '"><option value="10">hai</option><option value="20">20</option> <option value="50">50</option></select></td>'; 
    html += '<td>X</td>'; 
    html += '<td><input type="number" name="quantity[]" id="quantity_' + i + '" value="1" disabled="disabled"></td>'; 
    html += '</tr>'; 
    sidebar = '<tr id="row_' + i + '">'; 
    sidebar += '<td><input style="width:50%;" name="sofa' + i + '" type="text" id="price_sofa' + i + '" value="" disabled="disabled"></td>'; 
    sidebar += '</tr>'; 
    $('#table_item').append(html); 
    $('#table_sidebar').append(sidebar); 

    /* Get selected option value start here */ 
    (function(index){ 
     $('#sofa_' + index).on('change', function() { 
     $('#price_sofa' + index).val($(this).val()); 
     }); 
    })(i); 
    /* Get selected option value end here */ 
    i++; 
});