How to limit multiple input in javascript

Question

I want to limit my multiple input to three inputs only. I tried if else but the value of I can't read also try creating another variable. I try also length but don't know how to use it.

 $("#add-btn").click(function() { i++; $("#dynamicAddRemove").append('<tr><td><select name="moreFields[+i+][license_type]" class="form-control" required=""><option value="Psychometrician">Psychometrician</option><option value="Psychologist">Psychologist</option><option value="Teacher">Teacher</option><option value="Guidance Counselor">Guidance Counselor</option><option value="Medical Practioner">Medical Practioner</option><option value="Others">Others</option><option value="N/A">N/A</option></select></td> <td><input type="number" name="moreFields[+i+][license_number]" class="form-control" required></td><td><input type="date" name="moreFields[+i+][registration_date]" class="form-control" required></td><td><input type="date" name="moreFields[+i+][expiration_date]" class="form-control" required></td><td><button type="button" class="btn btn-danger remove-tr">-</button></td></tr>'); }); $(document).on('click', '.remove-tr', function() { $(this).parents('tr').remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-12 pt-4 pb-1"> <span class="title fs-4 fw-bold">License</span> <hr> </div> <table class="table" id="dynamicAddRemove"> <tr class="license"> <td> <label>License Type </label> <select name="moreFields[0][license_type]" class="form-control" required=""> <option value="Psychometrician">Psychometrician</option> <option value="Psychologist">Psychologist</option> <option value="Teacher">Teacher</option> <option value="Guidance Counselor">Guidance Counselor</option> <option value="Medical Practioner">Medical Practioner</option> <option value="Others">Others</option> <option value="N/A">N/A</option> </select> </td> <td> <label>License Number</label> <input type="number" name="moreFields[0][license_number]" class="form-control" required> </td> <td> <label>Registration Date</label> <input type="date" name="moreFields[0][registration_date]" class="form-control" required> </td> <td> <label>Expiration Date</label> <input type="date" name="moreFields[0][expiration_date]" class="form-control" required> </td> <td><button type="button" name="add" id="add-btn" class="mt-4 btn btn-primary rounded-pill" onclick="incrementClick()">+</button></td> </tr> </table>

Answer 1

If you are counting incrementally, you need to use a closure :

let i = 0;
$("#add-btn").click(function() {
  if (i >= 3) return;
  i++;
//...

Define the counter outside of the function and increment the counter within the function. Add an if statement to set a limit and short-circuit the function by calling return . Also the counter is decremented when a row is removed:

$(document).on('click', '.remove-tr', function() {
  $(this).closest('tr').remove();
  i--;
});

---

BTW, inline event handlers are garbage , avoid using them, and you never need to use them if you use jQuery:

<div onclick="lame(this)">NEVER DO THIS</div>

In addition:

• added a <thead>

• changed the <label> s into <th> s

• changed <span> into <caption>

• wrapped the column <div class='col-12'> around the whole <table>

• removed <hr>

It's not required, it's just aesthetics.

 let i = 0; $("#add-btn").click(function() { if (i >= 3) return; i++; $("#dynamicAddRemove").append('<tr><td><select name="moreFields[+i+][license_type]" class="form-control" required=""><option value="Psychometrician">Psychometrician</option><option value="Psychologist">Psychologist</option><option value="Teacher">Teacher</option><option value="Guidance Counselor">Guidance Counselor</option><option value="Medical Practioner">Medical Practioner</option><option value="Others">Others</option><option value="N/A">N/A</option></select></td> <td><input type="number" name="moreFields[+i+][license_number]" class="form-control" required></td><td><input type="date" name="moreFields[+i+][registration_date]" class="form-control" required></td><td><input type="date" name="moreFields[+i+][expiration_date]" class="form-control" required></td><td><button type="button" class="btn btn-danger remove-tr">-</button></td></tr>'); }); $(document).on('click', '.remove-tr', function() { $(this).closest('tr').remove(); i--; });

 <,DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min:css" rel="stylesheet"> <style></style> </head> <body> <main class="container"> <section class="row"> <div class="col-12 pt-4 pb-1"> <table class="table" id="dynamicAddRemove"> <caption class="fs-4 fw-bold caption-top">License</caption> <thead> <tr> <th>License Type</th> <th>License Number</th> <th>Registration Date</th> <th>Expiration Date</th> </tr> </thead> <tr class="license"> <td> <select name="moreFields[0][license_type]" class="form-control" required=""> <option value="Psychometrician">Psychometrician</option> <option value="Psychologist">Psychologist</option> <option value="Teacher">Teacher</option> <option value="Guidance Counselor">Guidance Counselor</option> <option value="Medical Practioner">Medical Practioner</option> <option value="Others">Others</option> <option value="N/A">N/A</option> </select> </td> <td> <input type="number" name="moreFields[0][license_number]" class="form-control" required> </td> <td> <input type="date" name="moreFields[0][registration_date]" class="form-control" required> </td> <td> <input type="date" name="moreFields[0][expiration_date]" class="form-control" required> </td> <td><button type="button" name="add" id="add-btn" class="btn btn-primary rounded-pill">+</button></td> </tr> </table> </div> </section> </main> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script></script> </body> </html>