Repeating section - highlight specific row

I want to indicate to the user that a particular row of a repeating section contains the currently equipped weapon (eg. change the background colour, or give it a coloured border) and I can't think of a way that isn't overly complicated to ensure that only one row is highlighted at a time. Here's the repeating section: <fieldset class="repeating_meleeweapons"> Weapon name <input type="text" name="attr_meleeweaponname" class="eightmidtextinput" /> <br> Weapon type <input type="text" name="attr_meleeweapon" list="meleeweapon" class="eightmidtextinput" /> <datalist id="meleeweapon"> <option value="Battleaxe" data-abr="d8" data-damage="6"> <!-- more options here --> </datalist> <br> Magic Bonus <input type="number" name="attr_magicmeleeweaponbonus" min="0" max="3" value="0" class="fourshorttextinput" /> Armour Bypass Roll <input type="text" name="attr_meleeabr" value="0" class="fourshorttextinput" /> Damage <input type="text" name="attr_meleedamage" value="0" size="4" class="fourshorttextinput" /> Other Effects <textarea name="attr_meleeothereffects"> </textarea> <br> <button type="action" name="act_equippedmeleewep">Equip</button> </fieldset> The action button: on("clicked:repeating_meleeweapons:equippedmeleewep", function(eventInfo) { // Get the row ID of the clicked button const rowId = eventInfo.triggerName.split('_')[2]; // Define the fields to retrieve from the current row const fields = [ `repeating_meleeweapons_${rowId}_meleeweaponname`, `repeating_meleeweapons_${rowId}_meleeweapon`, `repeating_meleeweapons_${rowId}_magicmeleeweaponbonus`, `repeating_meleeweapons_${rowId}_meleeabr`, `repeating_meleeweapons_${rowId}_meleedamage`, `repeating_meleeweapons_${rowId}_meleeothereffects` ]; // Get the attributes of the current row getAttrs(fields, function(values) { const output = { equippedmeleeweaponname: values[`repeating_meleeweapons_${rowId}_meleeweaponname`] || "", equippedmeleeweapontype: values[`repeating_meleeweapons_${rowId}_meleeweapon`] || "", equippedmeleeweaponmagicbonus: values[`repeating_meleeweapons_${rowId}_magicmeleeweaponbonus`] || 0, equippedmeleeweaponabr: values[`repeating_meleeweapons_${rowId}_meleeabr`] || "0d0", equippedmeleeweapondamage: values[`repeating_meleeweapons_${rowId}_meleedamage`] || "0", equippedmeleeweaponother: values[`repeating_meleeweapons_${rowId}_meleeothereffects`] || "" }; // Set the output attributes setAttrs(output); }); });

You should be able to set a hidden repeating checkbox using your Equip button. If only one weapon can be equipped at-a-time, you may have to apply some logic in a worker to uncheck the other weapons. Then use css to style that repeating row based on the checkbox state. At least that's how I would approach it. ;-)

I would change the repeating section to look like this (this method is a lot like Vince's suggestion): <fieldset class="repeating_meleeweapons"> <input type="hidden" name="attr_hide" value="0" class="toggle"> <div class="hidden-row"> <!-- everything currently inside your section goes here --> </div> </fieldset> Then in your CSS (change the style to match what you want - you might want to use background-color instead of or as well as border): input.toggle[value="1"] + div.hidden-row { border: 1pt solid red; } Then you'd need a sheet worker to respond to the button click: what this does is add a border to the div that contains just this row, whenever the hidden input for the current row to 1, and sets all other inputs to 0. on("clicked:repeating_meleeweapons:equippedmeleewep", function(eventInfo) { // Get the row ID of the clicked button const rowId = eventInfo.triggerName.split('_')[2]; getSectionIDs('repeating_meleeweapons', function(ids) { const output = {}; ids.forEach(function(id) { output[`repeating_meleeweapons_${id}_hide`] = (id == rowId) ? 1 : 0; }); setAttrs(output); }); }); I think that should do it.

If you already tried the above, I just corrected a minor typo - it does work now.

If you're using a datalist for your input, I would put that outside your repeating section (the input remains inside) - otherwise it will be duplicated with each row in the repeating section. You can place it anywhere in the HTML - i usually place datalists at the end. Ifyou want two columns, I'd also dump the <br> elements and create a grid in CSS, like .ui-dialog .charsheet div.hidden-row { display: grid; grid-template clumns: 100px 1fr; column-gap: 6px; } That divides everything inside the div into two columns. Change that 100px to match what you want the first column to be. It means things will line up a lot nicer. Though you could easily change the number of columns if you want. You could also put the bare text inside spans, to make the text easier to apply classes and styles to, like <span>Weapon name</span><input type="text" name="attr_meleeweaponname" class="eightmidtextinput" /> instead of Weapon name <input type="text" name="attr_meleeweaponname" class="eightmidtextinput" /> This comment is just suggestions. None of ths is required - it's just good ideas.

Thank you both, and sorry about the delay in response. The code works exactly as I wanted it to.