How to prevent a clear data upon clicking new add address using button in ASP.Net Core

@model Registration
@{
    ViewData["Title"] = "Register Page - Step Two";
}

<button type="button" class="btn btn-primary" onclick="addAddress()">Add Address</button>
<div class="container mt-5">
    <div class="row">
        <div class="col-md-12">
            <h2 class="text-center mb-4">Address Details</h2>
            <form asp-page-handler="RegisterStepTwo" method="post">
                <div id="addressesContainer" class="row mt-3 fieldRow">
                    <!-- Addresses will be dynamically added here -->
                </div>

                <button type="submit" class="btn btn-primary w-100">Next</button>
            </form>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        let addressCount = 0;

        function addAddress() {
            addressCount++;
            const addressesContainer = document.getElementById('addressesContainer');
            const fieldHtml = `
                                    <div class="col-md-2 mb-3"  id="type${addressCount}">
                                    <label class="form-label">Address type</label>
                                    <select id="addressType${addressCount}" class="form-select">
                                        <option value="">Select Address Type</option>
                                        <option value="Permanent">Permanent</option>
                                        <option value="Present">Present</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3"  id="housenumber${addressCount}" >
                                    <label class="form-label">House No.</label>
                                    <input type="text"  id="houseNumberVisible${addressCount}" class="form-control" placeholder="Enter house number">
                                </div>
                                <div class="col-md-3 mb-3 "  id="street${addressCount}" >
                                    <label class="form-label">Street</label>
                                    <input type="text" id="streetVisible${addressCount}" class="form-control" placeholder="Enter street name">
                                </div>
                                <div class="col-md-2 mb-3" id="barangay${addressCount}" >
                                    <label class="form-label">Barangay</label>
                                    <input type="text" id="barangayVisible${addressCount}" class="form-control" placeholder="Enter barangay name">
                                </div>
                                <div class="col-md-2 mb-3" id="btnRemove">
                                     <label class="form-label"></label>
                                     <button type="button" class="btn btn-danger remove-address-btn"  onclick="removeField(${addressCount})">-</button>
                                </div>
                        `;
            addressesContainer.innerHTML += fieldHtml;


        }

        function removeField(index) {
            // Construct the ID of the element to remove based on the index
            const type = `type${index}`;
            const housenumber = `housenumber${index}`;
            const street = `street${index}`;
            const barangay = `barangay${index}`;
            const removebtn = `btnRemove${index}`;

            // Find the element within the #addressesContainer
            const elementToRemove = document.getElementById(type).closest('.col-md-2.mb-3');
            const housenumberToRemove = document.getElementById(housenumber).closest('.col-md-3.mb-3');
            const streetToRemove = document.getElementById(street).closest('.col-md-3.mb-3');
            const barangayToRemove = document.getElementById(barangay).closest('.col-md-2.mb-3');
            const buttonToRemove = document.getElementById(removebtn).closest('.col-md-2.mb-3');;
            //   fieldRow
            if (elementToRemove && housenumberToRemove && streetToRemove && barangayToRemove && buttonToRemove) {
                elementToRemove.remove();
                housenumberToRemove.remove();
                streetToRemove.remove();
                barangayToRemove.remove();
                buttonToRemove.remove();

            }
        }

        addAddress();
    </script>
}

The code above is a form that can fill up their address details. The resident can have multiple addresses so that's why the system has a add button to add a new set of fields for address.

Now my problem is that once the resident fills up the address then the resident adds again for the another addresses the data for the first address was clear.

Example

The data was clear when I clicked the add address button.

Try to use $("#addressesContainer").append(fieldHtml); instead of addressesContainer.innerHTML += fieldHtml; It worked in my side.

We can add console.info(addressesContainer.innerHTML) and we will find that when we add a new address, the innerHTML doesn't contain the input value, that's why it always clear the data. So that we can use the append() method which is provided by jquery. Since we are working in the asp.net core MVC application, it integrates jquery by default in Layout, so that we can use it directly.

If you don't like jquery, then codes below which using appendChild can also be used to replace addressesContainer.innerHTML += fieldHtml;.

const newDiv = document.createElement('span');
newDiv.innerHTML = fieldHtml;
addressesContainer.appendChild(newDiv);