how to limit the number of table rows I can dynamically add with jquery

Question

I am a beginner in jQuery. I am creating a form that will allow me to register the information of multiple names and linkers at the same time. After asking for a name, I also ask for the information of a 'linker' by using a select. If the Up linker is A, the Lw linker should be B and so on until Up Linker is G, when LW should be A. For this reason I need to limit to 7 the amount of rows people can add.

At this moment my code allows people to add as many rows as they like.I don't know how to limit the number of rows that can be added.

Another problem is that I can make The Lw linker value to change depending on the option selected on the Up linker, but it only works on the first row. When I add a second row, the value of the second Up linker changes the first Lw linker not the second. I also don't know how to fix that.

Ideally what I would love to have is a form that, by default, already have 4 rows waiting for the name to be registered with the following linkers (Since I recommend them to fill this four)

1. Up A - Lw B
2. Up C - Lw D
3. Up D - Lw E
4. Up G - Lw A

If people are not ready to register these 4 they can remove the ones they don't have and if they like to register others with the missing linkers they could press the add button and choose the linkers they need. They should be able to register up to 7 names but the linkers should be used only once.

Many thanks if you can help explaining what I am missing.

This is my code

<link  rel="stylesheet" type="text/css"     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<form action="100K-5F_action_page_search.php" method="get">
<table  class="table table-hover small-text" id="tb">
<tr class="tr-header">
<th>Name</th>
<th>Up</th>
<th>Lw</th>
<th><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Features"><span class="glyphicon glyphicon-plus"></span></a></th>
<tr>
<td><input type="text" name="Name[]" class="form-control" style="width: 180px" maxlength="12"></td>
<td><select id ="Up" name="Up[]" class="form-control">
    <option value="A" selected>A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
    <option value="G">G</option>
</select></td>
<td><select id ="Lw"name="Lw[]" class="form-control">
    <option value="B">B</option>
</select></td>
<td><a href='javascript:void(0);'  class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script>
$(function(){
    $('#addMore').on('click', function() {
          var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
          data.find("input").val('');
     });
     $(document).on('click', '.remove', function() {
         var trIndex = $(this).closest("tr").index();
           if(trIndex>1) {
             $(this).closest("tr").remove();
           } else {
             alert("Sorry!! Can't remove first row!");
           }
      });
});      
</script>
<script>
    $(document).ready(function () {
        $("#Up").change(function () {
            var val = $(this).val();
            if (val == "A") {
                $("#Lw").html("<option value='B'>B</option>");
            } else if (val == "B") {
                $("#Lw").html("<option value='C'>C</option>");
            } else if (val == "C") {
                $("#Lw").html("<option value='D'>D</option>");
            } else if (val == "D") {
                $("#Lw").html("<option value='E'>E</option>");
            } else if (val == "E") {
                $("#Lw").html("<option value='F'>F</option>");
            } else if (val == "F") {
                $("#Lw").html("<option value='G'>G</option>");
            } else if (val == "G") {
                $("#Lw").html("<option value='A'>A</option>");
            }
        });
    });
</script>

 $(function(){ $('#addMore').on('click', function() { var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb"); data.find("input").val(''); }); $(document).on('click', '.remove', function() { var trIndex = $(this).closest("tr").index(); if(trIndex>1) { $(this).closest("tr").remove(); } else { alert("Sorry!! Can't remove first row!"); } }); }); $(document).ready(function () { $("#Up").change(function () { var val = $(this).val(); if (val == "A") { $("#Lw").html("<option value='B'>B</option>"); } else if (val == "B") { $("#Lw").html("<option value='C'>C</option>"); } else if (val == "C") { $("#Lw").html("<option value='D'>D</option>"); } else if (val == "D") { $("#Lw").html("<option value='E'>E</option>"); } else if (val == "E") { $("#Lw").html("<option value='F'>F</option>"); } else if (val == "F") { $("#Lw").html("<option value='G'>G</option>"); } else if (val == "G") { $("#Lw").html("<option value='A'>A</option>"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <form action="100K-5F_action_page_search.php" method="get"> <table class="table table-hover small-text" id="tb"> <tr class="tr-header"> <th>Name</th> <th>Up</th> <th>Lw</th> <th><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Features"><span class="glyphicon glyphicon-plus"></span></a></th> <tr> <td><input type="text" name="Name[]" class="form-control" style="width: 180px" maxlength="12"></td> <td><select id ="Up" name="Up[]" class="form-control"> <option value="A" selected>A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> <option value="F">F</option> <option value="G">G</option> </select></td> <td><select id ="Lw"name="Lw[]" class="form-control"> <option value="B">B</option> </select></td> <td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove'></span></a></td> </tr> </table> <input type="submit" value="Submit"> </form> 

Answer 1

Try this by chaging your addMore btn click listener like this

 $('#addMore').on('click', function() { var nb_rows = $('form table tr:not(.tr-header)').length; if(nb_rows < 7){ // add row var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb"); data.find("input").val(''); } else//alert { alert("You can not add new row") } }); 

Answer 2

I have updated your code to do the what you were intended to do, i beleive it is working now. Let me know if you face any problems.

 $(function () { $('#addMore').on('click', function () { last_index = $("#tb tr:last").attr("index"); total_rows = $("#tb tr").length; if(total_rows > 7) alert("you can not insert more than 7 rows"); else insertRow(Number(last_index) +1,"A","B"); }); $(document).on('click', '.remove', function () { var trIndex = $(this).closest("tr").index(); if (trIndex >= 1) { $(this).closest("tr").remove(); } else { alert("Sorry!! Can't remove first row!"); } }); }); function insertRow(index, Up, Lw){ row_Html =`<tr index = ${index}> <td><input type="text" name="Name[]" class="form-control" style="width: 180px" maxlength="12"></td> <td> <select id="Up_${index}" name="Up[]" class="form-control" index = ${index}> <option value="A" selected>A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> <option value="F">F</option> <option value="G">G</option> </select> </td> <td> <select id="Lw_${index}" name="Lw[]" class="form-control" index = ${index}> </select> </td> <td> <a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove'></span></a> </td> </tr>`; appended_row = $("#tb tbody").append(row_Html); appended_row.find(`#Up_${index}`).val(Up); appended_row.find(`#Lw_${index}`).append(`<option value="${Lw}">${Lw}</option>`); appended_row.find("input").val(''); } $(document).ready(function () { insertRow(1,"A","B"); insertRow(2,"B","C"); insertRow(3,"C","D"); insertRow(4,"D","E"); $("#tb").on('change', "select[id^='Up_']", function () { var val = $(this).val(); var index = $(this).attr("index"); if (val == "A") { $(`#Lw_${index}`).html("<option value='B'>B</option>"); } else if (val == "B") { $(`#Lw_${index}`).html("<option value='C'>C</option>"); } else if (val == "C") { $(`#Lw_${index}`).html("<option value='D'>D</option>"); } else if (val == "D") { $(`#Lw_${index}`).html("<option value='E'>E</option>"); } else if (val == "E") { $(`#Lw_${index}`).html("<option value='F'>F</option>"); } else if (val == "F") { $(`#Lw_${index}`).html("<option value='G'>G</option>"); } else if (val == "G") { $(`#Lw_${index}`).html("<option value='A'>A</option>"); } }); }); 

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <form action="100K-5F_action_page_search.php" method="get"> <table class="table table-hover small-text" id="tb"> <thead> <tr class="tr-header"> <th>Name</th> <th>Up</th> <th>Lw</th> <th><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Features"><span class="glyphicon glyphicon-plus"></span></a></th> </tr> </thead> <tbody> </tbody> </table> <input type="submit" value="Submit"> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

Answer 3

try this for first part of your ask to limit to 7

<script>
var max = 7;
var count = 1;
$(function(){
    $('#addMore').on('click', function() {
        if(count < max ){
              var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
              data.find("input").val('');
          count++;
      }
 });
 $(document).on('click', '.remove', function() {
     var trIndex = $(this).closest("tr").index();
       if(trIndex>1) {
         $(this).closest("tr").remove();
         count--;
       } else {
         alert("Sorry!! Can't remove first row!");
       }
  });
});      
</script>