How to use Jquery to reset count when multiple elements are deleted?

Question

Apologize ahead of time if I submitted this question incorrectly. First question I have had large amounts of code to accompany it.

How can I reset a count variable and reassign that number to the respective fields when a group of elements is deleted? I understand through the fiddle below how to do it if just one field is involved but not sure how to accomplish this same thing when multiple fields are together.

I have been learning a lot about Jquery but still finding myself encountering obstacles that leave me without answers. Going off of this JSFiddle

    <h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" class="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

    function resetIndexes(){
    var j = 1;   
    $('.p_scnt').each(function(){
        if( j > 1){
        $(this).attr('name', 'p_scnt_' + j);
            $(this).attr('placeholder', 'Input Value'+j);
        }   
        j++;    
    });
}


$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents .p_scnt').size() + 1;

    $('#addScnt').on('click', function() {
        i = $('#p_scents .p_scnt').size() + 1;   
        $('<p><label for="p_scnts"><input type="text" size="20" class="p_scnt" name="p_scnt_' + i +'" value="" placeholder="Input Value'+i+'" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
    });

    $('#p_scents').on('click', '.remScnt', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    resetIndexes();
            }
            return false;
    });



});

I have reworked it to show what I am asking. I understand how this works with one field but in my case, I have a group of inputs that need created with each other and deleted as a whole. I cannot seem to find the correct method to keep the same function as shown in the first example. Any assistance is greatly appreciated.

The reworked version.

function resetIndexes(){
    var j = 1;   
    $('.p_scnt').each(function(){
        if( j > 1){
        $(this).attr('name', 'p_scnt_' + j);
            $(this).attr('placeholder', 'Input Value'+j);
        }   
        j++;    
    });
}


$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents .p_scnt').size() + 1;

    $('#addScnt').on('click', function() {
        i = $('#p_scents .p_scnt').size() + 1;   
        $('<p><input type="text" size="20" class="Parent" name="Parent_' + i +'" value="" placeholder="Input Value'+i+'" /><input type="text" size="20" class="Child" name="Child_' + i +'" value="" placeholder="Input Value'+i+'" /><input type="text" size="20" class="Grandchild" name="Grandchild_' + i +'" value="" placeholder="Input Value'+i+'" /><a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
    });

    $('#p_scents').on('click', '.remScnt', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    resetIndexes();
            }
            return false;
    });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <input type="text" class="p_scnt" size="20" name="Parent" value="" placeholder="Parent" />
        <input type="text" class="p_scnt" size="20" name="Child" value="" placeholder="Child" />
        <input type="text" class="p_scnt" size="20" name="Grandchild" value="" placeholder="Grandchild" />
    </p>
</div>

Answer 1

Lots of ways to do this but one way is add a container element and then use that for your count. You could also probably divide the count of inputs by 3.

Here's an example with the first method. The inputs are wrapped with <p class="input-wrap"> and it loops over those, finding inputs within and updating their name/input based on the count of the container.

Also splits the name of the original input elements on _ so that the base names you used (like "Parent_") are preserved. You could do something similar for the placeholder attribute.

function resetIndexes() {
  var j = 1, name, $this;
  
  // for each element on the page with the class .input-wrap
  $('.input-wrap').each(function() {
    if (j > 1) {
      // within each matched .input-wrap element, find each <input> element  
      $(this).find('input').each(function() {
        $this = $(this);
        name = $this.attr("name").split('_')[0];
        $(this).attr('name', name + '_' + j);
        $(this).attr('placeholder', 'Input Value ' + j);
      })
    }
    j++;
  });
}


$(function() {
  var scntDiv = $('#p_scents');
  var i;

  $('#addScnt').on('click', function() {
    // instead of counting inputs, count the wrappers
    i = $('#p_scents .input-wrap').size() + 1;
    $('<p class="input-wrap"><input type="text" size="20" class="Parent" name="Parent_' + i + '" value="" placeholder="Input Value ' + i + '" /> <input type="text" size="20" class="Child" name="Child_' + i + '" value="" placeholder="Input Value ' + i + '" /> <input type="text" size="20" class="Grandchild" name="Grandchild_' + i + '" value="" placeholder="Input Value ' + i + '" /> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
    i++;
    return false;
  });

  $('#p_scents').on('click', '.remScnt', function() {
    if (i > 2) {
      $(this).parents('p').remove();
      resetIndexes();
    }
    return false;
  });



});

* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }

input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
  <p class="input-wrap">
    <input type="text" class="p_scnt" size="20" name="Parent" value="" placeholder="Parent" />
    <input type="text" class="p_scnt" size="20" name="Child" value="" placeholder="Child" />
    <input type="text" class="p_scnt" size="20" name="Grandchild" value="" placeholder="Grandchild" />
  </p>
</div>