JSFiddle - React, Tailwind, and code Playground

by dying_sakura

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Add a row and type any number at number textbox column and press ctrl+enter. You'll see the "Not good" is not working on added rows. It'll only work if you enter the number manually per row.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
  <thead>
    <tr>
    </tr>
  </thead>
  <tbody>
    <div class="row">
      <tr>
        <th>#</th>
        <th>Number</th>

        <th>Action</th>
      </tr>
      <tr id="row_0">
        <td>
          <input id="#" name="#" class="auto_num" type="text" value="1" readonly />
        </td>
        <td class="labelcell">
          <input value="" class="form" name="lightBand1" placeholder="" id="lightBand1" />
          <span class="email_result"></span>
        </td>

        <td class="labelcell">
          <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
        </td>
      </tr>
    </div>
  </tbody>


  <tfoot>
    <tr>
    </tr>
    <tr>
      <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
    </tr>
  </tfoot>
</table>

JavaScript

$("#addrow").on('click', function() {

  let rowIndex = $('.auto_num').length + 1;
  let rowIndexx = $('.auto_num').length + 1;

  var newRow = '<tr><td><input class="auto_num"  type="text" name="entryCount" value="' + rowIndexx + '" /></td>"' +
    '<td><input name="lightBand' + rowIndex + '"  value="" class="form"  type="number"  /> <span class="email_result"></span></td>"' +

    '<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';

  $("#applicanttable > tbody > tr:last").after(newRow);


});



$(document).on('change', 'input[name*=lightBand]', function() {

  var lightBand1 = $(this).val(); //get value
  var selector = $(this) //save slector
  selector.next('.email_result').html("") //empty previous error
  if (lightBand1 != '') {
    /*$.ajax({
      url: "<?php echo base_url(); ?>participant/check_number_avalibility",
      method: "POST",
      data: {
        lightBand1: lightBand1
      },
      success: function(data) {*/
    selector.next('.email_result').html("NOT GOOD"); //use next here ..
    /* }
    });*/
  }
});

  const inputs = document.querySelectorAll(".form");
  
  document.querySelectorAll(".form")[0].addEventListener("keyup", e => {
  const inputs = document.querySelectorAll(".form");
    let value = parseInt(e.target.value);
    if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
      inputs.forEach((inp, i) => {
        if (i !== 0) {
          inp.value = ++value;
        }
      })
    }
  });