How can I add a fieldset in a form?

How can I add a fieldset to my form? I know how to delete it, but how can I add it?

I found this code from w3schools and I am trying to apply it to my from.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

The function I wrote is this one, but doesn’t seem to be adding the fieldset.

function doublePumpf(){
  if(document.getElementById ("pump2").checked) {
    document.getElementById("fieldsetpump3").remove();
    const secondPinfo = document.getElementById ("fieldsetpump2"); 
    const para = document.createElement ("p");
    para.appendChild(secondPinfo);
    const element2 = document.getElementById("parentfieldset");
    element2.appendChild(para);
  }
}

The input that needs to be clicked is this one:

<input type="radio" name="pumpselect" id= pump2 value="doublePump" onclick = "doublePumpf()">
  <label for="pump2"> Double Pump</label><br>

And the fieldset that needs to be added is this one:

<fieldset id = fieldsetpump2>
  
       <legend> 
         <h4> <u>  Second stage pump. </u> </h4> 
       </legend>
  
  <label for="gpmPump2" style= "margin-bottom:20px">* GPM (second stage): </label>
  <input type="number" id="gpmPump2" style = "bottom-margin:3px" name="gpmPump2" placeholder = "GPM required" required ><br>
  
  <label for="pressure2" style= "margin-bottom:20px"> * Pressure (psi):</label>
  <input type="number" id="pressure2" name="pressure2" placeholder = "Max Cont. pressure 2" required> <br>
  
  
  <h4>
    Type for second stage pump.
  </h4>
  
  <input type="radio" name="p2type" value="p2fixed" checked>
  <label for="p2fixed"> Fixed displacement </label>
  
  <input type="radio" name="p2type" value="p2variable">
  <label for="p2variable"> Variable displacement</label><br> 
  
  
  <fieldset id = p2controlselect> 
    <legend>
       <h4>
    Controls for variable displacement second stage pump
  </h4>
    </legend>
  
  <input type="radio" name="p2control" value="p2pressurecomp" checked>
  <label for="p2pressurecomp"> Pressure Compensated </label>
  
  <input type="radio" name="p2control" value="p2loadsensing">
  <label for="p2loadsensing"> Load Sensing</label><br>
  
  <input type="radio" name="p2control" value="p2pressurecompwithremote">
  <label for="p2pressurecompwithremote"> Pressure Compensated with Remote Control </label>
  
  <input type="radio" name="p2control" value="p2hplimiter">
  <label for="p2hplimiter"> HP Limiter </label><br> 
  
   <input type="radio" name="p2control" value="p2other">
  <label for="p2other"> Other (please comment in notes below) </label><br> <br>
    
     </fieldset>
    </fieldset>

Codepen :

UPDATE…

Trying to troubleshoot it in the Google console and getting this error:

Uncaught TypeError: Cannot read properties of null (reading ‘remove’)

The error happens after I remove a fieldset and click on the other option, and that other option also has the a function to remove a fieldset that has previously been deleted.

Depending on how the user clicks on the options, some options will have a function to repeat a task that needs to be done.

Anyway, still this doesn’t give any errors from the function of “adding” a field set.

I really don’t mind getting that error, as long I am able to add and remove the proper fieldsets according to the options.

UPDATE…

This entire approach to “add” a fieldset won’t work because a fieldset is not a Node type of component.

Maybe I’ll just have to get rid of the fieldsets and get a different approach on this one.