I'm making some custom edits to the Kids on Bikes character sheet and can't figure out what I'm doing wrong here. I managed to add some sliders that will be used to track progress in four classes. Each slider is paired with a text input for the name of the class. There is no issue saving the text input but the only slider value that is saving is the first one. The attribute appears on the Attributes & Abilities list but none of the others do even though I essentially copy pasted and changed attribute names. I tried changing the attribute names in case the system didn't like them but had no luck. I can't understand why one of them would work but not the rest of them? <!-- class sliders -->
<div class="class-sliders">
<!-- class 1 -->
<input class="slider-title" name="attr_class1_name" type="text" placeholder="Class 1" value="">
<input class="slider" name="attr_class1" type="range" min="0" max="5" value="0">
<div class="slider-labels">
<span class="slider-number">0</span>
<span class="slider-number">1</span>
<span class="slider-number">2</span>
<span class="slider-number">3</span>
<span class="slider-number">4</span>
<span class="slider-number">5</span>
</div>
<hr/>
<!-- class 2 -->
<input class="slider-title" name="attr_class2_name" type="text" placeholder="Class 2" value="">
<input class="slider" name="attr_class2" type="range" min="0" max="5" value="0">
<div class="slider-labels">
<span class="slider-number">0</span>
<span class="slider-number">1</span>
<span class="slider-number">2</span>
<span class="slider-number">3</span>
<span class="slider-number">4</span>
<span class="slider-number">5</span>
</div>
<hr/>
<!-- class 3 -->
<input class="slider-title" name="attr_class3_name" type="text" placeholder="Class 3" value="">
<input class="slider" name="attr_class3" type="range" min="0" max="5" value="0">
<div class="slider-labels">
<span class="slider-number">0</span>
<span class="slider-number">1</span>
<span class="slider-number">2</span>
<span class="slider-number">3</span>
<span class="slider-number">4</span>
<span class="slider-number">5</span>
</div>
<hr/>
<!-- class 4 -->
<input class="slider-title" name="attr_class4_name" type="text" placeholder="Class 4" value="">
<input class="slider" name="attr_class4" type="range" min="0" max="5" value="0">
<div class="slider-labels">
<span class="slider-number">0</span>
<span class="slider-number">1</span>
<span class="slider-number">2</span>
<span class="slider-number">3</span>
<span class="slider-number">4</span>
<span class="slider-number">5</span>
</div>
<hr/>
</div>