If I delete the form1, then form2, form3, form4 label automatically have to change in to form1, form2, form3 like vice, If I delete form form2 then form3, form4 label have to change in to form2, form3.
function delete1(){
(document.getElementById('form1').style.display = 'none')
}
function delete2(){
(document.getElementById('form2').style.display = 'none')
}
function delete3(){
(document.getElementById('form3').style.display = 'none')
}
function delete4(){
(document.getElementById('form4').style.display = 'none')
}<div id="form1">
<label class="class1">form 1</label>
<button onclick="delete1()">Delete</button>
</div>
<div id="form2">
<label class="class2">form 2</label>
<button onclick="delete2()">Delete</button>
</div>
<div id="form3">
<label class="class3">form 3</label>
<button onclick="delete3()">Delete</button>
</div>
<div id="form4">
<label class="class4">form 4</label>
<button onclick="delete4()">Delete</button>
</div>Hope below code helps you
function delete1(){
(document.getElementById('form1').style.display = 'none')
resetName()
}
function delete2(){
(document.getElementById('form2').style.display = 'none')
resetName()
}
function delete3(){
(document.getElementById('form3').style.display = 'none')
resetName()
}
function delete4(){
(document.getElementById('form4').style.display = 'none')
resetName()
}
function resetName() {
var div_list = document.querySelectorAll('.form');
var div_array = [...div_list]; // converts NodeList to Array
div_array.filter(d=>d.style.display != 'none').forEach((div,i) => {
div.querySelector("label").innerText = "form " + (i+1)
});
}<div id="form1" class="form">
<label class="class1">form 1</label>
<button onclick="delete1()">Delete</button>
</div>
<div id="form2" class="form">
<label class="class2">form 2</label>
<button onclick="delete2()">Delete</button>
</div>
<div id="form3" class="form">
<label class="class3">form 3</label>
<button onclick="delete3()">Delete</button>
</div>
<div id="form4" class="form">
<label class="class4">form 4</label>
<button onclick="delete4()">Delete</button>
</div>In your js file, loop through all the forms, check if display != 'none', subsequently changing the innerHTML of your form text and the id of your form to the specific index or formatted string.