append如何每次都计算索引以及删除它时可以重置js中的整个索引

Question

how can the append count the index each time and when remove it can reset the entire index in js

$('button#add_ticket').click(function(e) {
                $('#ticket_content').append(
                    `<div class="partials">
                        <div class="heading">
                            <div class='box'>
                                <div>
                                    test
                                </div>
                            </div>
                            <div>
                                <button onclick="removeRow(this)" type="button" class="btn btn-primary">X</button>
                            </div>
                        </div>
                    </div>`
                )
            })
    
            function removeRow(e) {
                e.parentElement.parentNode.parentElement.remove();
            }

here is the code

<div id='ticket_content'></div>
<button id='add_ticket' type="button"></button>

Answer 1

You don't need to use JS and index for counting your appended elements, you can simply use CSS:
MDN - Using_CSS_counters

 $('#add_ticket').on("click", function(e) { $('#ticket_content').append( `<div class="partials__box"> <div class="heading d-flex"> <div class='box-header'> <div class='header-box bases__text-bold bases__font--18'> test </div> </div> <div class='box-header'> <button onclick="removeRow(this)" type="button" class="btn btn-primary">X</button> </div> </div> <div class="body"></div> </div>` ); }); function removeRow(el) { $(el).closest(".partials__box").remove(); }

 #ticket_content { counter-reset: ticket; }.partials__box::before { counter-increment: ticket; content: counter(ticket) ". "; }

 <div id='ticket_content'></div> <button id='add_ticket' type="button">ADD</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>