ДИЗАЙН: выпадающий + метка + кнопка и повторяющаяся строка

Question

У меня вопрос, связанный с дизайном.

У меня есть счет для добавления товара.Один продукт добавляется в линию. По одному добавленному продукту в каждой строке изображения

Когда я добавляю продукт, я также отображаю его гарантию в столбце Гарантия :

Выбранныйгарантия на продукт отображается в столбце «Гарантия»

Но когда я добавляю какой-либо другой продукт, я не могу отобразить его гарантию. Невозможно отобразить гарантию в последующих продуктах

Мой HTML-код, в котором параметры раскрывающегося списка появляются динамически:

<tbody style="border: 1px solid rgba(0,0,0,0.35); height: 34px; line-height: 34px;">
    <tr class="text-center">
        <td>
            <select id="myDropdown" name="bill_product[]" onChange="dropdownTip(this.value)">
                <option disabled selected value="">Select Product</option>
                <option id="1" value="31/01/2020">Product #1</option>
                <option id="2" value="31/01/2030">Product #2</option>
                <option id="3" value="31/01/2040">Product #3</option>
            </select>
        </td>
        <td>
            <input name="txtbox" type="text" id="txtbox" />
        </td>
        <td>
            <button type="button" class="btn btn-danger btn-xs disabled">
                <i class="fa fa-times"></i>
            </button>
        </td>
    </tr>
</tbody>

Мой JS для добавления строки в счет:

$(document).ready(function () {
    var counter = 0;
    $("#addrow").on("click", function () {
        var newRow = $("<tr class='text-center'>");
        var cols = "";
        cols += '<td><select name="bill_product[]"><option disabled selected value="">Select Product</option><cms:pages masterpage="product.php"><option value="<cms:show k_page_id />"><cms:show k_page_title /></option></cms:pages></select></td>';
        cols += '<td><input type="text" id="txtbox" name="txtbox" /></td>';
        cols += '<td><button type="button" class="ibtnDel btn btn-danger btn-xs"><i class="fa fa-times"></i></button></td>';
        newRow.append(cols);
        $("table.order-list").append(newRow);
            counter++;
        });
        $("table.order-list").on("click", ".ibtnDel", function (event) {
            $(this).closest("tr").remove();       
                counter -= 1
            });
        });

Мой код для отображения даты окончания гарантии:

$(document).ready(function() {
    $("#myDropdown").change(function() {
        var selectedValue = $(this).val();
        $("#txtbox").val(selectedValue);
    });
});

ВЫПУСК: Я не могу отобразить значение даты гарантии на любом продукте после первого.

Пожалуйста, помогите.

PS: Я использую CouchCMS, чтобы динамически перенести мои значения в тег выбора.

Answer 1

Идентификаторы для всех полей ввода гарантии одинаковы, это "txtbox".Вы можете использовать переменную counter , чтобы иметь отдельные идентификаторы для всех полей гарантии.

Answer 2

Вот решение, которое я предлагаю, я, кстати, избавляюсь от не родного JS, оно позволяет ему соответствовать любому решению:

<tbody style="border: 1px solid rgba(0,0,0,0.35); height: 34px; line-height: 34px;">
    <tr class="text-center">
        <td>
            <select id="myDropdown" name="bill_product[]" onChange="dropdownTip(this.value)">
                <option disabled selected value="">Select Product</option>
                <option id="1" value="31/01/2020">Product #1</option>
                <option id="2" value="31/01/2030">Product #2</option>
                <option id="3" value="31/01/2040">Product #3</option>
            </select>
        </td>
        <td>
            <input name="txtbox" type="text" id="txtbox" />
        </td>
        <td>
            <button type="button" class="btn btn-danger btn-xs disabled">
                Delete
            </button>
        </td>
    </tr>
</tbody>

// Line removal
let delBtns = document.querySelectorAll(".del-btn");

[].forEach.call(delBtns, function(delBtn){
    delBtn.addEventListener('click', function(event){
    let line = event.target.dataset.line;

    let lineToRemove = document.querySelector("#line-"+line);

    lineToRemove.remove();
  })
});

// Input update
let productDropDowns = document.querySelectorAll("select");

[].forEach.call(productDropDowns, function(dropDown){
    dropDown.addEventListener('change', function(event){
    let line = event.target.dataset.line;

    document.querySelector('#line-'+line+' input').value = event.target.value;
  })
});

// New line button
let count = 0;
let newLineButton = document.querySelector("#newLineTrigger");

newLineButton.addEventListener('click', function(){
    count++;
    let tableBody = document.querySelector('tbody');
  let newLine = document.createElement('tr');
  newLine.id = 'line-' + count;
  tableBody.appendChild(newLine);
  newLine = document.querySelector('#line-' + count);

  let col1 = document.createElement('td');
    let select = document.createElement('select');
  select.id = 'drop' + count;
  select.dataset.line = count;

  select.addEventListener('change', function(event){
    let line = event.target.dataset.line;
    document.querySelector('#line-'+line+' input').value = event.target.value;
  })

  for(let i=0; i<3; i++){
    let option = document.createElement('option');
    option.value = i;
    option.innerText = 'option ' + i;
    select.appendChild(option);
  }

    col1.appendChild(select);

  let col2 = document.createElement('td');
  let textBox = document.createElement('input');
  textBox.id = 'textBox'+count;
  textBox.name = 'textBox'+count;
  col2.appendChild(textBox);

  let col3 = document.createElement('td');
  let newDelBtn = document.createElement('button');
  newDelBtn.className = "del-btn";
  newDelBtn.dataset.line = count;
  newDelBtn.innerText = "Delete";
  newDelBtn.addEventListener('click', function(event){
    let line = event.target.dataset.line;

    let lineToRemove = newLine;

    lineToRemove.remove();
  });
  col3.appendChild(newDelBtn);


    newLine.appendChild(col1);
    newLine.appendChild(col2);
    newLine.appendChild(col3);

  tableBody.appendChild(newLine);
});

Answer 3

Я не вижу элемента триггера '#addrow', который добавляет строку.Не могли бы вы обновить скрипку, чтобы включить эту кнопку, пожалуйста?