如何同步动态创建的选择框

Question

我有一个能够添加和删除2个选择框的行的代码，我需要它们每行同步（例如，第1行的选择框1将与第1行的选择框2同步）

我的同步javascript代码仅适用于第一行，但我不知道如何使其适用于那些可以通过按钮单击添加的选择框。

你们能帮我吗？ 这是我的代码：

//how i sync
var $synch = $("select.toxy").on('change', function() {
  $synch.not(this).get(0).selectedIndex = this.selectedIndex;

});
//how i sync end

//how i add row
$(document).ready(function() {
  $("body").on('click', '.btn-add-more', function(e) {
    e.preventDefault();
    var $sr = ($(".jdr1").length + 1);
    var rowid = Math.random();
    var $html = '<tr class="jdr1" id="' + rowid + '">' +
      '<td><span class="btn btn-sm btn-default">' + $sr + '</span><input type="hidden" name="count[]" value="' + Math.floor((Math.random() * 10000) + 1) + '"></td>' +
      '<td><select  class="form-control select-sm hargaartikel toxy"  name="jtest[]"><option value="20000">T1</option><option value="35000">T2</option><option value="hargablumditentukan">V1</option><option value="hargablumditentukan">FCM</option></select></td>' +
      '<td><select  class="form-control select-sm toxy"  name="jtype[]"><option>T1</option><option>T2</option><option>V1</option><option>FCM</option></select></td>' +
      '</tr>';
    $("#table-details").append($html);

  });

  $("body").on('click', '.btn-remove-detail-row', function(e) {
    e.preventDefault();
    if ($("#table-details tr:last-child").attr('id') != 'row1') {
      $("#table-details tr:last-child").remove();
    }

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row jumbotron">
  <form method="POST" action="" id="frm_submit">
    <div class="col-md-12">

      <fieldset>
        <legend>Detail</legend>

        <!-- Text input-->
        <table style="width: 100%" class="table">
          <thead>
            <tr>
              <th>No.</th>
              <th>Type</th>
              <th>Type Child</th>
            </tr>

          </thead>
          <tbody id="table-details">
            <tr id="row1" class="jdr1">
              <td><span class="btn btn-sm btn-default">1</span><input type="hidden" value="6437" name="count[]"></td>

              <td>
                <select class="form-control select-sm hargaartikel toxy" name="jtest[]">
                  <option value="20000">T1</option>
                  <option value="35000">T2</option>
                  <option value="0">V1</option>
                  <option value="0">FCM</option>
                </select>

              </td>

              <td>
                <select class="form-control select-sm toxy" name="jtype[]">
                  <option>T1</option>
                  <option>T2</option>
                  <option>V1</option>
                  <option>FCM</option>
                </select>
              </td>

            </tr>
          </tbody>
        </table>
        <button class="btn btn-primary btn-sm btn-add-more">Add More</button>
        <button class="btn btn-sm btn-warning btn-remove-detail-row">RemoveRow</button>
      </fieldset>

    </div>

  </form>
</div>

预先感谢