javascript - i want make no.of inputs equal in codeigniter

Question

Here i repeated the table dynamically in this project.what i want to make is no.of passenger must be equal to no.of passenger details.Now even if i enter details of 5 passengers bt no.tickets can be any number.this should not happen.how can i solve it?

<script>
$(document).ready(function(){
  var i=1;

    $('#add').click(function(){
    i++;

  $('#a').append('<tr id="row'+i+'"><th><input type="text" name="pname[]" placeholder="Name" class="form-control name_list" /></th><th ><input type="number" name="age[]" placeholder="Age" class="form-control name_list" min="5" max="130" /></th><th scope=""><select class="form-control" id="gender[]" name="gender[]"  placeholder="gender" width=""> <option>Male</option> <option>Female</option></select></th><th><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></th></tr>');
    });

    $(document).on('click', '.btn_remove', function(){
        var button_id = $(this).attr("id"); 
        $('#row'+button_id+'').remove();
    });

});
</script>

  <div class="form-group">
              <label for="No.of adults">No.of Passengers</label>
              <?php echo form_input(['type'=>'number','name'=>'pass_no','class'=>'form-control','id'=>'passenger','min'=>1,'max'=>9,'onkeyup'=>"sum();",'placeholder'=>'Enter No.of Adults','value'=>set_value('pass_no')]); ?>
                <?php echo form_error('pass_no'); ?>
                </div>

            <label for="No.of Children">Passenger Details</label><button type="button" class="btn btn-primary btn-sm" id="add" style="margin-left:170px">Add Passenger</button>
            <table class="table table-secondary" id="a" name="a">
            <thead>
            <tr class="table-default">
            <th scope="col-lg-15">
              <? if(isset($pname)): // Name set? ?>
                <? foreach($pname as $item): // Loop through all previous posted items ?>
                  <?php echo form_input(['type'=>'text','name'=>'pname[]','value'=>'','class'=>'form-control','id'=>'pname','placeholder'=>'Name','value'=>set_value('pname[]')]); ?>
                    <?php echo form_error('pname[]'); ?>
                <? endforeach; ?>
              <? else: ?>
              <? endif; ?>
            </th>
            <th scope="col-lg-15">
              <? if(isset($age)): // Name set? ?>
                <? foreach($age as $item): ?>

                 <?php echo form_input(['type'=>'number','name'=>'age[]','class'=>'form-control','id'=>'age','min'=>5,'max'=>130,'placeholder'=>'Age','value'=>set_value('age[]')]); ?>
              <?php echo form_error('age[]'); ?>
                <? endforeach; ?>
              <? else: ?>
              <? endif; ?>
            </th>
            <th scope="col-lg-15">
              <? if(isset($gender)): // Name set? ?>
                <? foreach($gender as $item): // Loop through all previous posted items ?>
                  <select class="form-control" id="gender[]" name="gender[]"  placeholder="Gender" > 

                    <option>Male</option> 
                    <option>Female</option>
                  </select>
                <? endforeach; ?>
              <? else: ?>
              <? endif; ?>
            </th>
            </tr>
            </thead>
            </table>

Answer 1

Ok @suraj shetty, I've created a demo from your code(removing the php code) which will not allow the passenger details to be greater than total passengers.

But keep in mind, this will not prevent the user from submitting the form with fewer details, ie 2 passengers and only 1 detail(You can prevent this but it's annoying and should be avoided). So, you should validate this on form submit. Also, the user can first add details of 2 passengers and then change the total number to 1. This should also be checked on submit.

So, I added a class(passenger_detail) to the tr and every time, the user adds detail I match total passengers with total elements of the class, the same class is included when on new tr element when added.
I would advise you to use clone() instead of appending a whole(same) row. It's bad practice. You can add id after cloning(if that was the reason behind using append).

$(document).ready(function(){
  var i=1;

    $('#add').click(function(){
       let total_passenger = $('#passenger').val(); // get total passengers 
       let total_details   = $('.passenger_detail').length; // get total rows with class total_details
       if(total_details < total_passenger){ // check the condition
       
        i++;

        $('#a').append('<tr class="passenger_detail" id="row'+i+'"><th><input type="text" name="pname[]" placeholder="Name" class="form-control name_list" /></th><th ><input type="number" name="age[]" placeholder="Age" class="form-control name_list" min="5" max="130" /></th><th scope=""><select class="form-control" id="gender[]" name="gender[]"  placeholder="gender" width=""> <option>Male</option> <option>Female</option></select></th><th><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></th></tr>');  // use clone() here, then add id
       
      }else{ // you can remove this if you don't want to show any message
        alert('Passenger details cannot be greater than no. of passengers'); // your custom message
       }
    });

    $(document).on('click', '.btn_remove', function(){ // you can also check the condition on remove but should avoid doing that. Check on submit instead.
        var button_id = $(this).attr("id"); 
        $('#row'+button_id+'').remove();
    });

});

function sum(){} // just to avoid error, because you're calling sum() onkeyup. Your logic here.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="No.of adults">No.of Passengers</label>
  <input type='number' name='pass_no' class='form-control' id='passenger' min='1' max='9' onkeyup="sum();" placeholder='Enter No.of Adults' value='1'>
</div>

<label for="Passenger Details">Passenger Details</label><button type="button" class="btn btn-primary btn-sm" id="add" style="margin-left:170px">Add Passenger</button>
<table class="table table-secondary" id="a" name="a">
  <thead>
    <tr class="table-default passenger_detail">
      <th scope="col-lg-15">
        <input type='text' name='pname[]' class='form-control' id='pname' placeholder='Name' value='Sauhard' />
      </th>
      <th scope="col-lg-15">
        <input type='number ' name='age[] ' class='form-control' id='age' min='5 ' max='130' placeholder='Age ' value='23' />
      </th>
      <th scope="col-lg-15">
        <select class="form-control" id="gender[]" name="gender[]" placeholder="Gender">
          <option>Male</option>
          <option>Female</option>
        </select>
      </th>
    </tr>
  </thead>
</table>