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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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>LB#</th>
                <th>Weight#</th>
                <th>Wingband #</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="hehe form-control" placeholder="" required id="auto"/>
                </td>
                <td class="labelcell">
              <input data-id="weight"  name="weight1"  type="number" placeholder="Working divisible by 5" />
                <input data-id="weight"  name="weight1"  type="number" placeholder="Working divisible by 5" />
                </td>
                <td class="labelcell">
                   <input  name="wingBand"  class="hehe form-control" type="number" />
                </td>
                <td class="labelcell">
                   <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" >
                </td>
             </tr>
          </div>
       </tbody>
       </div>
       <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+'" id="auto"  value="" class="form"  type="number"  /></td>"' +
                            '<td><input data-id="weight" name="weight'+rowIndex+'" type="number" placeholder="not working divisible by 5" /></td>"' +
                            '<td><input id="wingBand" name="wingBand'+rowIndex+'" type="number" /></td>"' +
                            '<td><input type="button" class="removerow" id="removerow'+rowIndex+'" name="removerow'+rowIndex+'" value="Remove"/></td>';
        
            $("#applicanttable > tbody > tr:last").after(newRow);               
        
        
        });
        
           // divisible by only 5
 const inputer = document.querySelectorAll('input[data-id="weight"]');
inputer.forEach(input => {
  input.addEventListener('change', () => {
    if (input.value % 5 !== 0) {
      alert('not valid');
      input.value = 5;
    }
  });
});