From 9dd2e733cc4fb962654b228490dec0e9372e1403 Mon Sep 17 00:00:00 2001
From: Rachid Mrad <rachid.mrad@ecstech.com>
Date: Thu, 26 Oct 2023 14:39:27 -0400
Subject: [PATCH] instead of show/hide, enable/disable

---
 src/registrar/assets/js/get-gov.js | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index b0062805c..489cdcad2 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -311,13 +311,14 @@ function prepareDeleteButtons(formLabel) {
 
       // Remove the add more button if we have less than 13 forms
       if (isNameserversForm && forms.length <= 13) {
-        addButton.classList.remove("display-none")
+        addButton.classList.remove("display-none");
       }
 
       if (isNameserversForm && forms.length < 3) {
         // Hide the delete buttons on the remaining nameservers
         Array.from(form.querySelectorAll('.delete-record')).forEach((deleteButton) => {
-          deleteButton.classList.add("display-none");
+          // deleteButton.classList.add("display-none");
+          deleteButton.setAttribute("disabled", "true");
         });
       }
     
@@ -381,11 +382,12 @@ function prepareDeleteButtons(formLabel) {
           });
         }
 
-        // If the source element we're copying has an invisible delete button,
-        // show that button
-        let deleteButtonNeedsCleanUp = newForm.querySelector('.delete-record').classList.contains("display-none");
-        if (deleteButtonNeedsCleanUp) {
-          newForm.querySelector('.delete-record').classList.remove("display-none");
+        // If the source element we're copying has an disabled delete button,
+        // enable that button
+        let deleteButton= newForm.querySelector('.delete-record');
+        if (deleteButton.hasAttribute("disabled")) {
+          // newForm.querySelector('.delete-record').classList.remove("display-none");
+          deleteButton.removeAttribute("disabled");
         }
       }
 
@@ -438,16 +440,18 @@ function prepareDeleteButtons(formLabel) {
       // Attach click event listener on the delete buttons of the new form
       prepareDeleteButtons(formLabel);
 
-      // Hide the add more button if we have 13 forms
+      // Disable the add more button if we have 13 forms
       if (isNameserversForm && formNum == 13) {
-        addButton.classList.add("display-none")
+        // addButton.classList.add("display-none");
+        addButton.setAttribute("disabled", "true");
       }
 
       if (isNameserversForm && forms.length >= 2) {
-        // Show the delete buttons on the nameservers
+        // Enable the delete buttons on the nameservers
         forms.forEach((form, index) => {
           Array.from(form.querySelectorAll('.delete-record')).forEach((deleteButton) => {
-            deleteButton.classList.remove("display-none");
+            // deleteButton.classList.remove("display-none");
+            deleteButton.removeAttribute("disabled");
           });
         });
       }