How to limit multiple input in javascript-CodePudding

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]"  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]"  required></td><td><input type="date" name="moreFields[ i ][registration_date]"  required></td><td><input type="date" name="moreFields[ i ][expiration_date]"  required></td><td><button type="button" >-</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 >
  <span >License</span>
  <hr>
</div>
<table  id="dynamicAddRemove">
  <tr >
    <td>
      <label>License Type </label>
      <select name="moreFields[0][license_type]"  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]"  required>
    </td>
    <td>
      <label>Registration Date</label>
      <input type="date" name="moreFields[0][registration_date]"  required>
    </td>
    <td>
      <label>Expiration Date</label>
      <input type="date" name="moreFields[0][expiration_date]"  required>
    </td>
    <td><button type="button" name="add" id="add-btn"  onclick="incrementClick()"> </button></td>
  </tr>
</table>

CodePudding user response：

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]"  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]"  required></td><td><input type="date" name="moreFields[ i ][registration_date]"  required></td><td><input type="date" name="moreFields[ i ][expiration_date]"  required></td><td><button type="button" >-</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style></style>
</head>

<body>
  <main >
    <section >
      <div >
        <table  id="dynamicAddRemove">
        <caption >License</caption>
          <thead>
            <tr>
              <th>License Type</th>
              <th>License Number</th>
              <th>Registration Date</th>
              <th>Expiration Date</th>
            </tr>
          </thead>
          <tr >
            <td>
              <select name="moreFields[0][license_type]"  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]"  required>
            </td>
            <td>
              <input type="date" name="moreFields[0][registration_date]"  required>
            </td>
            <td>
              <input type="date" name="moreFields[0][expiration_date]"  required>
            </td>
            <td><button type="button" name="add" id="add-btn" > </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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script></script>
</body>

</html>