Javascript JQuery获取不同行的选定选项值

我对不同行的所选选项值有问题。我成功地获得了第一行的值。我想做的是不同的行项目有不同的价格

我之前关于“JQuery获取添加行的选定选项值”的问题已经解决：

现在，我提出了另一个问题，即为不同的行获取不同的值。图片示例如下所示

以下是我的JS的代码：

var i=$（'table tr'）。长度；
$（“.tambah_sofa”）.on（'click'，function（）{
/*添加新行函数从这里开始*/
html=''；
html+='X'；
html+='hai20 50'；
html+='X'；
html+=''；
html+=''；
边栏=“”；
边栏+=''；
边栏+=''；
$（“#表_项”）.append（html）；
$（“#表_侧栏”）。追加（侧栏）；
/*从这里开始获取所选选项值*/
$（'body'）。关于（'change'，'sofa_u'+i+''，函数（）{
$（'#price_sofa'+i+''）.val（$（this.find（'option:selected'）.val（））；
});
/*获取所选选项值结束于此处*/
i++；
});
var i=$（'table tr'）。长度；
$（“.tambah_sofa”）.on（'click'，function（）{
/*添加新行函数从这里开始*/
html=''；
html+='X'；
html+='hai20 50'；
html+='X'；
html+=''；
html+=''；
边栏=“”；
边栏+=''；
边栏+=''；
$（“#表_项”）.append（html）；
$（“#表_侧栏”）。追加（侧栏）；
/*从这里开始获取所选选项值*/
（功能（索引）{
$（'#sofa'+index）.on（'change'，function（）{
$（'#price_sofa'+index）.val（$（this.val（））；
});
})（i） )；
/*获取所选选项值结束于此处*/
i++；
});
请发布完整代码或示例链接！这里有一个链接，例如：复制时出错。更正了。请现在检查。
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++;
});