javascript (в Laravel 5.7) переиндексация объекта при динамическом удалении / повторном добавлении этого объекта

Question

Я использую Laravel 5.7 для создания форм.В моем текущем коде при добавлении динамических заголовков и полей первые динамически добавляемые заголовки индексируются с помощью «2», затем «3», затем «4» и т. Д.

Но если я удаляю их все иПовторно добавьте их, они будут проиндексированы «5», «6», «7».Теперь, если я удаляю «6», отображаемый объект остается индексированным «5» и «7».

Я бы хотел, чтобы индексы обновлялись каждый раз, когда кнопка удаления используется всегда, чтобы иметь «1», «2 "," 3 ".

При рассмотрении вопросов о стековом потоке я видел людей, добавляющих i--; вместо remove().Я видел темы о переиндексации массивов в Javascript, но я не совсем понимаю, как это относится к моей проблеме.

Буду признателен за помощь.Спасибо!

ПРОСМОТР (create.blade.php)

<div id="dynamic_field">
   <!--MY CODE = non dynamic content-->
   <!--JAVASCRIPT CODES to add headers and fields when clicking the Add button-->
      @include('inc.header_script', ['header'=>'MY HEADER'])
      @include('inc.onefield_script', $field_parameters)
</div>

<!--ADD BUTTON-->
<button type="button" name="add" id="add" class="btn btn-success">Add</button>

<!--JAVASCRIPT CODE to remove dynamically added headers and fields--> 
<script type="text/javascript">
   $(document).ready(function(){
       var i=1;

       $(document).on('click','.btn_remove', function(){
           var button_id = $(this).attr("id");
           $('#dyn_header_added'+button_id+'').remove();
           $('.dyn_container_added'+button_id+'').remove();
       });
    }); 
</script>

СЦЕНАРИЙ НА ПЕРВОМ @ @ INCLUDE (динамический заголовок):

<script type="text/javascript">
    $(document).ready(function(){
        var i=1;

        $('#add').click(function(){
            i++;
            $('#dynamic_field').append(
                '<div id="dyn_header_added'+i+'">'+
                '<hr>'+
                    '<br>'+
                    '<h5> 'MY HEADER #'+i+'</h5>'+
                    '<hr class="border border-primary">'+
                '</div>'
            );
        });
    }); 
</script>

СЦЕНАРИЙ ВО ВТОРОМ @INCLUDE (динамическое поле):

<script type="text/javascript">
    $(document).ready(function(){
        var i=1;

        $('#add').click(function(){
            i++;
            $('#dynamic_field').append(
                '<div class="container dyn_container_added'+i+'" id="dyn_container_added'+i+'">'+
                    '<div class="form-group">'+
                        '<div class="row">'+

                            '<div class="col">'+
                                '@if($input_type_l == 'textinput')'+
                                    '{{Form::label($input_name_l, $input_label_l)}}'+
                                    '{{Form::text($input_name_l,$input_default_l,['class' => $input_class_l,'placeholder'=>$input_placeholder_l])}}'+   
                                '@elseif($input_type_l == 'dateinput')'+
                                    '{{Form::label($input_name_l,$input_label_l)}}'+
                                    '{{Form::date($input_name_l,$input_default_l,['class'=>$input_class_l])}}'+
                                '@else'+
                                    'This datatype is not set yet!'+
                                '@endif'+
                            '</div>'+

                            '<div class="col">'+
                            '</div>'+

                        '</div>'+
                    '</div>'+
                    //'<br>'+
                '</div>'
            );
        });
    }); 

</script>