DESIGN: Dropdown+Label+Button and Repeating row wise

Question

I have a design related question.

I have a bill to add product. One product is added per line. One Product added per line image

When I add a product, I also display its warranty in the Warranty column:

Selected product shows warranty in Warranty Column

But when I add any other product, I cannot display its Warranty. Cannot Display Warranty in subsequent products

My HTML where dropdown options are coming dynamically:

<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>

My JS for adding row to bill:

$(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
            });
        });

My Code to display the warranty end date:

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

ISSUE: I am unable to display the value of the warranty date on any product after the first one.

Please help.

P.S.: I am using CouchCMS to dynamically bring my values to the option tag of select.

Answer 1

Here's the solution I propose, I get rid off not-native JS by the way, it allows it to fit with any solution :

<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 2

The ids for all warranty input field is same, which is "txtbox". You can use the counter variable to have separate ids for all warranty fields.

Answer 3

I don't see the triggerring element '#addrow' which adds the row. Could you update the fiddle to include this button, please?