JavaScript How to add and remove fieldsets from a form?

[Elindo]

So, I got the

remove()

part OK, but now how do I add it back?

The function I wrote that doesn't work to add is this below, but I can't get it to work on 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); 
}
}

All fieldsets are wrapped in a parent fieldset with 3 sub fieldsets, and each 3 subfieldsets have one more filedset inside.

For this function I am trying to add and remove only the 3 main sub fieldsets that are directly wrapped under the main parent fieldset.

The radio selector to check if it is checked is outside the fieldset and is this one with

id=pump2

:

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

And the fieldset that I am testing and I can't get it to add is this one below (

<fieldset id = fieldsetpump2>

), which also has another internal fieldset inside of it.

<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>

 

[Elindo]

Codepen:
Complete code Form from above post here.