Как получить несколько SKU для одного товара в счете - jquery

Question

Я строю счет, в котором пользователь может ввести товар и его количество. После того, как пользователь проверит гарантийные поля должны быть заполнены для ввода sku.

например: если проверяется гарантия и количество продуктов 10, пользователь должен иметь возможность ввести 10 sku

Я застрял в разделе, где я хотел бы получить sku для продуктов , Я могу получить sku в каждой строке, но я хотел бы получить его в виде массива и сопоставить его с соответствующим идентификатором строки, чтобы я не усложнил счет.

Я пробовал несколько методов, но, к сожалению, ни один из них не работает,

Попробуйте 1: Использовал флажок в качестве идентификатора для отображения поля ввода для ввода,

Проблема: флажок не отправляет значение непроверенного поля, поэтому я получаю несоответствие результата массива

Попытка 2: Tried DropDown,

Проблема: не удалось связать элемент с конкретным раскрывающимся списком. Кроме того, выпадающий список ведет себя странно.

Во время поиска inte rnet я не могу найти ссылку на свою модель. Я изобретаю колесо или придерживаюсь старого стиля?

//Intiate the dropdown
$('select').formSelect();

$(function() {
  var i = 1;
  $("#add_row").on("click", function(e) {
    e.preventDefault();
    b = i - 1;
    $("#addr" + i).html($("#addr" + b).html());
    $(".tab_logic").append('<tr id="addr' + (i + 1) + '"></tr>');
    i++;
    warrantyDetails();
    $('select').formSelect();

  });

  $("#delete_row").click(function() {
    if (i > 1) {
      $("#addr" + (i - 1)).html("");
      i--;
    }
  });
});

function warrantyDetails() {
  $('.warrantyonClick, .warranty').on('change', function() {
    console.log(this);
    var warranty = $('.warranty').find(":selected").val();
    if (warranty == 1) {
      console.log(this);
      $(this).find(".warranty_details").show();
      $(this).formSelect();
    } else {
      $(this).find(".warranty_details").hide();
    }
  });
}

// I am unable to bind the element because the this points to .waaranty and the .warrantyonClick is outside of the parent. 
// Also I am unable to populate the fields based on the quantity

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<table class="tab_logic" id="tab_logic">
  <thead class="orange ">
    <tr>
      <th>
        Product Name
      </th>
      <th>
        HSN Code
      </th>
      <th class="center">
        GST
      </th>
      <th>
        Quantity
      </th>
      <th>
        Rate(per Nos)
      </th>

      <th>
        Warranty
      </th>
      <th>
        Amount
      </th>

    </tr>
  </thead>
  <tbody id="tab_logic_body">
    <tr id='addr0' class="addr0">
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="text" class="product_name autocomplete" placeholder="Product Name">
              <input type="hidden" name="product_id[]" class="product_id">
            </div>
          </div>
        </div>
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="text" class="hsn_code autocomplete" placeholder="HSN Code">
              <input type="hidden" name="hsn_code_id[]" class="hsn_code_id">
            </div>
          </div>
        </div>
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly">
              <input type="hidden" class="gst_price">
            </div>
          </div>
        </div>
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="number" name='quantity[]' placeholder='Enter Qty' class="form-control qty" step="0" min="0" required />
            </div>
          </div>
        </div>
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="number" name='product_price[]' placeholder='Enter Price' class="form-control product_price" step="0" min="0" required />
            </div>
          </div>
        </div>
      </td>

      <td class="warrantyonClick">
        <div class="row">
          <div class="input-field col s12">
            <select class="warranty no-autoinit" name="warranty[]">
              <option value="1">Yes</option>
              <option value="0" selected>No</option>
            </select>
          </div>
        </div>
        <div class="warranty_details" style="display:none">
          <input type="text" name='sku[]' placeholder='Serial No' class="form-control sku" />
          <input type="number" name='sku_warranty_time[]' placeholder='Time Period' class="form-control sku_warranty_time" />
        </div>
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="number" name='row_total_amount[]' placeholder='Total Amount' class="form-control row_total_amount" step="0" min="0" readonly="readonly" />
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr id='addr1' class="addr1"></tr>
  </tbody>

</table>

<table>
  <thead>
    <tr>
      <th>
        <th class="right">
          <button type="button" class="btn z-depth-1" id="add_row"><i
                                                class="material-icons">add_box</i>
                                        </button>
          <button type="button" class="btn z-depth-1 red" id="delete_row"><i
                                                class="material-icons">remove</i> </button>
        </th>
      </th>
    </tr>
  </thead>
</table>