By click of the button the same form is added under that form but how can i get the value of the number of times it getting printed &store it in table

Question

by click of the button the same form is added under that form but how can i get the value of the number of times it getting printed &store it in table. How can I insert the data into table if the user add more experiences from model. On the click of the button the value in the value field should increment too and how can I enter if the user add any number of experiences so how can I enter the data in the table. I am inserting this data in table in row wise fashion in table

<div class="col-md-12" id="addexperience">
  <button type="button" class="btn-primary"  style="float:right;" onclick="addexperience()">Add work experience</button>
  <input type="hidden" name="1experience" id="1experience" value="<?php $i = 1; ?>">
  <div class="form-group">
   <label>If yes, fill the following table</label>
   <div class="col-md-3">
    <label>Status</label>
    <select class="form-control" name="status">
     <option value="">Select</option>
     <option value="1" <?php sel($student_experience['status'], '1'); ?>>Current</option>
     <option value="0" <?php sel($student_experience['status'], '0'); ?>>Past</option>
    </select>
   </div>
   <div class="col-md-3">
    <label>Designation</label>
    <input type="text"  class="form-control" name="designation" value="<?php echo esc_output($student_experience['designation']);?>">
   </div>
   <div class="col-md-3">
    <label>Duration</label>
    <input type="number"  class="form-control" name="duration" value="<?php echo esc_output($student_experience['duration']);?>">  
   </div>
   <div class="col-md-3">
    <label>Employer</label>
    <input type="text"  class="form-control" name="employer" value="<?php echo esc_output($student_experience['employer']);?>">
   </div>
  </div>
</div>

<script>
  function addexperience(){
    var i = $('#1experience').val();
    i++; 
    $('#addexperience').append('<div class="col-md-3"> <label>Status</label> <select class="form-control" name="status'+i+'">'+
                          '<option value="">Select</option>'+
                          '<option value="Current">Current</option>'+
                          '<option value="Past">Past</option> </select> </div>'+

                      '<div class="col-md-3">'+
                        '<label>Designation</label>'+
                        '<input type="text"  class="form-control" name="designation'+i+'">'+
                      '</div>'+

                      '<div class="col-md-3">'+
                        '<label>Duration</label>'+
                        '<input type="text"  class="form-control" name="duration'+i+'">'+  
                      '</div>'+

                      '<div class="col-md-3">'+
                        '<label>Employer</label>'+
                        '<input type="text"  class="form-control" name="employer'+i+'">'+
                      '</div>'+
                    '</div>');
                     

    $(function () {
      $('#1experience').val(i);
    });
}
</script>

Answer 1

If you modify the HTML slightly in both the initial page display and within the javascript function so that the newly added items are grouped within a single container(div) and the initial elements are similarly grouped and a name assigned to the immediate ancestor of the initially displayed elements ( here I chose data-id='receiver' ) then this matter of deducing the number of times the elements have been added becomes a matter of counting the child elements within the common parent - querySelectorAll being useful here though no doubt jQuery has a concise method to do this too.

With that said though if you were to use the array syntax form form element names, such as designation[] or duration[] when the form is submitted you will have access to each element as an array in PHP ( or other backend language ) which will also, as a byproduct, reveal that same number of elements. Using the array syntax means you do not need to try to keep track of this number within the client

function addexperience() {
  let i=document.querySelectorAll('[data-id="receiver"] > div').length;
  
  $('[data-id="receiver"]').append('<div><div class="col-md-3"> <label>Status</label> <select class="form-control" name="status' + i + '">' +
    '<option value="">Select</option>' +
    '<option value="Current">Current</option>' +
    '<option value="Past">Past</option> </select> </div>' +

    '<div class="col-md-3">' +
    '<label>Designation</label>' +
    '<input type="text"  class="form-control" name="designation' + i + '">' +
    '</div>' +

    '<div class="col-md-3">' +
    '<label>Duration</label>' +
    '<input type="text"  class="form-control" name="duration' + i + '">' +
    '</div>' +

    '<div class="col-md-3">' +
    '<label>Employer</label>' +
    '<input type="text"  class="form-control" name="employer' + i + '">' +
    '</div>' +
    '</div></div>');


    alert(i);
    document.querySelector('input[name="duplicates"]').value=i;
    
    fetch( location.href, {method:'post',body:'total='+i})
      .then(r=>r.text())
      .then(text=>{
        alert(text)
      })
}

[data-id='receiver']{border:1px solid red;margin:1rem;padding:1rem;}
[data-id='receiver'] > div{margin:1rem;border:1px solid black;padding:0.5rem}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-md-12" id="addexperience">

    <button type="button" class="btn-primary" style="float:right;" onclick="addexperience()">Add work experience</button>

    <div data-id='receiver' class="form-group">
        <div>
            <label>If yes, fill the following table</label>
            <div class="col-md-3">
                <label>Status</label>
                <select class="form-control" name="status">
                    <option value="">Select</option>
                    <option value="1" <?php sel($student_experience[ 'status'], '1'); ?>>Current</option>
                    <option value="0" <?php sel($student_experience[ 'status'], '0'); ?>>Past</option>
                </select>
            </div>
            <div class="col-md-3">
                <label>Designation</label>
                <input type="text" class="form-control" name="designation" value="<?php echo esc_output($student_experience['designation']);?>">
            </div>
            <div class="col-md-3">
                <label>Duration</label>
                <input type="number" class="form-control" name="duration" value="<?php echo esc_output($student_experience['duration']);?>">
            </div>
            <div class="col-md-3">
                <label>Employer</label>
                <input type="text" class="form-control" name="employer" value="<?php echo esc_output($student_experience['employer']);?>">
            </div>
        </div>
        
        <!-- additional content inserted here within common parent -->
    </div>
</div>


<input type='hidden' name='duplicates' />