Hello All! First time Poster here. I am writing up a custom sheet for my Marvel Superheroes game and having a bit of a problem with my repeating sections. I understand you are not allowed to have nested fieldsets with repeating sections (which is sad but workable) but I have two very separate fieldsets on a page, one for Super Powers and then one for Power Stunts. The Super Powers fieldset works fine, it populates where I need it to and allows me to create multiple powers, the css never breaks down and everything is editable. However just below that in the separate power stunts section my code allows for a new stunt to be generated and then filled out, but then when a new one is generated any previous ones become "locked" or "disabled" so that you can no longer edit their contents. I have a feeling it has something to do with value's or names but I cannot figure it out for the life of me. I am new to HTML and CSS and have spent probably close to 3 hours now troubleshooting this one issue, I have removed all the code down to a single row of 4 columns with just four bare inputs and the issue persists. So I am not sure what else to try. Please find the applicable code below and advise, and thanks in advance. HTML <div class="sheet-character-sheet sheet-show">
<div class="paper">
<fieldset class="repeating_powers">
<div class="row">
<div class="column-1">
<label class="blocklabels">Power Name</label>
</div>
<div class="column-2">
<label class="blocklabels">Rank</label>
</div>
<div class="column-3">
<label class="blocklabels">Rank Number</label>
</div>
</div>
<div class="row">
<div class="column-1">
<input class="blockinputs" type="text" name="attr_powername"></input>
</div>
<div class="column-2">
<select class="select" name="attr_powerrank">
<option value="_"></option>
<option value="Shift-0">Shift-0</option>
<option value="Feeble">Feeble</option>
<option value="Poor">Poor</option>
<option value="Typical">Typical</option>
<option value="Good">Good</option>
<option value="Excellent">Excellent</option>
<option value="Remarkable">Remarkable</option>
<option value="Incredible">Incredible</option>
<option value="Amazing">Amazing</option>
<option value="Monstrous">Monstrous</option>
<option value="Unearthly">Unearthly</option>
<option value="Shift-X">Shift-X</option>
<option value="Shift-Y">Shift-Y</option>
<option value="Shift-Z">Shift-Z</option>
<option value="CL1000">Class 1000</option>
<option value="CL3000">CLass 3000</option>
<option value="CL5000">Class 5000</option>
<option value="Beyond">Beyond</option>
</select>
</div>
<div class="column-3">
<input class="blockinputs" type="text" name="attr_powerranknumber"></input>
</div>
</div>
<div class="row">
<label class="blocklabels">Description</label>
<textarea class="description" type="text" name="attr_powerdescription"></textarea>
</div>
</fieldset>
<div class="row">
<div class="column">
<label class="blocklabels">Power Stunt Name:</label>
</div>
<div class="column">
<label class="blocklabels">Rank:</label>
</div>
<div class="column">
<label class="blocklabels">Progress</label>
</div>
<div class="column">
<label class="blocklabels">Description</label>
</div>
</div>
<div class="row">
<fieldset class="repeating_powerstunts">
<div class="row">
<div class="column">
<input class="blockinputs" type="text" name="attr_powerstuntname"></input>
</div>
<div class="column">
<select class="select" name="attr_powerstuntrank">
<option value="_"></option>
<option value="Shift-0">Shift-0</option>
<option value="Feeble">Feeble</option>
<option value="Poor">Poor</option>
<option value="Typical">Typical</option>
<option value="Good">Good</option>
<option value="Excellent">Excellent</option>
<option value="Remarkable">Remarkable</option>
<option value="Incredible">Incredible</option>
<option value="Amazing">Amazing</option>
<option value="Monstrous">Monstrous</option>
<option value="Unearthly">Unearthly</option>
<option value="Shift-X">Shift-X</option>
<option value="Shift-Y">Shift-Y</option>
<option value="Shift-Z">Shift-Z</option>
<option value="CL1000">Class 1000</option>
<option value="CL3000">CLass 3000</option>
<option value="CL5000">Class 5000</option>
<option value="Beyond">Beyond</option>
</select>
</div>
<div class="column">
<div class="psProgressR">
<input type="checkbox" name="attr_red" value="red">
</div>
<div class="psProgressY">
<input type="checkbox" name="attr_yellow1" value="yellow1">
</div>
<div class="psProgressY">
<input type="checkbox" name="attr_yellow2" value="yellow2">
</div>
<div class="psProgressG">
<input type="checkbox" name="attr_green1" value="green1">
</div>
<div class="psProgressG">
<input type="checkbox" name="attr_green2" value="green2">
</div>
<div class="psProgressG">
<input type="checkbox" name="attr_green3" value="green3">
</div>
<div class="psProgressPerma">
<input type="checkbox" name="attr_perma" value="perma">
</div>
</div>
<div class="column">
<textarea class="descriptionps" name="attr_powerstuntdescription"></textarea>
</div>
</div>
</fieldset>
</div>
</div>
</div>
