JS fix to update nameservers sublables

src/registrar/assets/js/get-gov.js

@@ -238,6 +238,10 @@ function handleValidationClick(e) {
 function prepareDeleteButtons(formLabel) {
   let deleteButtons = document.querySelectorAll(".delete-record");
   let totalForms = document.querySelector("#id_form-TOTAL_FORMS");
+  let isNameserversForm = false;
+  let addButton = document.querySelector("#add-form");
+  if (document.title.includes("DNS name servers |"))
+    isNameserversForm = true;
 
   // Loop through each delete button and attach the click event listener
   deleteButtons.forEach((deleteButton) => {
@@ -251,7 +255,9 @@ function prepareDeleteButtons(formLabel) {
     totalForms.setAttribute('value', `${forms.length}`);
 
     let formNumberRegex = RegExp(`form-(\\d){1}-`, 'g');
-    let formLabelRegex = RegExp(`${formLabel} (\\d){1}`, 'g');
+    let formLabelRegex = RegExp(`${formLabel} (\\d+){1}`, 'g');
+    // For the eample on Nameservers
+    let formExampleRegex = RegExp(`ns(\\d+){1}`, 'g');
 
     forms.forEach((form, index) => {
       // Iterate over child nodes of the current element
@@ -267,10 +273,43 @@ function prepareDeleteButtons(formLabel) {
       });
 
       // h2 and legend for DS form, label for nameservers  
-      Array.from(form.querySelectorAll('h2, legend, label')).forEach((node) => {
-        node.textContent = node.textContent.replace(formLabelRegex, `${formLabel} ${index + 1}`);
+      Array.from(form.querySelectorAll('h2, legend, label, p')).forEach((node) => {
+        
+        // Ticket: 1192
+        // if (isNameserversForm && index <= 1 && !node.innerHTML.includes('*')) {
+        // // Create a new element
+        // const newElement = document.createElement('abbr');
+        // newElement.textContent = '*';
+        // // TODO: finish building abbr
+
+        // // Append the new element to the parent
+        // node.appendChild(newElement);
+        //   // Find the next sibling that is an input element
+        //   let nextInputElement = node.nextElementSibling;
+
+        //   while (nextInputElement) {
+        //     if (nextInputElement.tagName === 'INPUT') {
+        //       // Found the next input element
+        //       console.log(nextInputElement);
+        //       break;
+        //     }
+        //     nextInputElement = nextInputElement.nextElementSibling;
+        //   }
+        //   nextInputElement.required = true;
+        // }
+
+        // Ticket: 1192 - remove if
+        if (!(isNameserversForm && index <= 1)) {
+          node.textContent = node.textContent.replace(formLabelRegex, `${formLabel} ${index + 1}`);
+          node.textContent = node.textContent.replace(formExampleRegex, `ns${index + 1}`);
+        }
       });
 
+      // Remove the add more button if we have less than 13 forms
+      if (isNameserversForm && forms.length <= 13) {
+        addButton.classList.remove("display-none")
+      }
+    
     });
   }
 }
@@ -288,7 +327,9 @@ function prepareDeleteButtons(formLabel) {
   let totalForms = document.querySelector("#id_form-TOTAL_FORMS");
   let cloneIndex = 0;
   let formLabel = '';
+  let isNameserversForm = false;
   if (document.title.includes("DNS name servers |")) {
+    isNameserversForm = true;
     cloneIndex = 2;
     formLabel = "Name server";
   } else if ((document.title.includes("DS Data |")) || (document.title.includes("Key Data |"))) {
@@ -358,5 +399,10 @@ 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
+      if (isNameserversForm && formNum == 13) {
+        addButton.classList.add("display-none")
+      }
   }
 })();

src/registrar/templates/domain_nameservers.html

@@ -49,6 +49,7 @@
           {% endwith %}
         </div>
         <div class="tablet:grid-col-2">
+          {% comment %} TODO: remove this if for 1192 {% endcomment %}
           {% if forloop.counter > 2 %}
             <button type="button" class="usa-button usa-button--unstyled display-block delete-record margin-bottom-075">
               <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
@@ -61,17 +62,21 @@
     </div>
     {% endfor %}
 
-    <button type="button" class="usa-button usa-button--unstyled display-block margin-bottom-2" id="add-form">
+    <button type="button" class="usa-button usa-button--unstyled display-block" id="add-form">
       <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
         <use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
       </svg><span class="margin-left-05">Add another name server</span>
     </button>
 
-    <button
-          type="submit"
-          class="usa-button"
-      >Save
-    </button>
+    {% comment %} Work around USWDS' button margins to add some spacing between the submit and the 'add more'
+    This solution still works when we remove the 'add more' at 13 forms {% endcomment %}
+    <div class="margin-top-2">
+      <button
+            type="submit"
+            class="usa-button"
+        >Save
+      </button>
+    </div>
   </form>
 
   <form aria-label="form to undo changes to the Name Servers">