SweetSpHTML4 1.1.4

let addressCount = 1;
document.getElementById('btnAddDeliveryAddress').addEventListener('click', function () {
   const newRow = document.createElement('tr');
   newRow.classList.add('deliveryAddressRow');
   newRow.id = `deliveryAddressRow_${addressCount}`;
   newRow.innerHTML = `
                       <td><input type="text" name="DeliveryAddresses[${addressCount}].Address" class="form-control" required /></td>
                       <td><input type="text" name="DeliveryAddresses[${addressCount}].ContactPerson" class="form-control" required /></td>
                       <td><input type="text" name="DeliveryAddresses[${addressCount}].Phone" class="form-control" required /></td>
                        <td>
                           <button type="button" class="btn btn-danger btn-sm btnRemoveDeliveryAddress" >Delete</button>
                        </td>
                   `;
   document.getElementById('deliveryAddressContainer').appendChild(newRow);
   addressCount++;
});



document.getElementById('deliveryAddressContainer').addEventListener('click', function (e) {
   if (e.target.classList.contains('btnRemoveDeliveryAddress')) {
       e.target.closest('tr').remove();
   }
})



//edit customer

function editCustomer(customerId) {
   $.ajax({
       url: '/Customers/GetCustomer',
       type: 'GET',
       data: { id: customerId },
       success: function (response) {
           if (response) {
               //console.log(response);
               .val(response.customerId);
               .val(response.name);
               .val(response.businessStart.split('T')[0]);
               .val(response.creditDetails);
               .val(response.phone);
               .val(response.email);
               .val(response.customerType);
               .val(response.address);

               //Handle Photo

               if (response.photo) {
                   .attr("src", "/Uploads/" + response.photo).removeClass("d-none");
               } else {
                   .addClass("d-none");
               }

               //Handle Delivery Address

               .empty();
               response.deliveryAddresses.forEach((address, index) => {
                   var row = ` <tr class="deliveryAddressRow">
                                         <td><input type="text" name="DeliveryAddresses[${index}].Address" class="form-control" value="${address.address}" required /></td>
                                         <td><input type="text" name="DeliveryAddresses[${index}].ContactPerson" class="form-control" value="${address.contactPerson}" required /></td>
                                         <td><input type="text" name="DeliveryAddresses[${index}].Phone" class="form-control" value="${address.phone}" required /></td>
                                         <td>
                                            <button type="button" class="btn btn-danger btn-sm btnRemoveDeliveryAddress" >Delete</button>
                                           <button type="button" class="btn btn-success btn-sm" id="btnAddDeliveryAddressEdit">Add</button>
                                         </td>
                                    </tr>
                           `;
                   .append(row);
               });