javascript - JQuery 获取不同行的选定选项值

Question

我在为不同行选择的选项值时遇到问题。我成功地获得了第一行的值。我想做的是不同的行项目有不同的价格。

我之前关于“JQuery Get Selected Option Value for Add Row”的问题已经解决: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++;
});