2 sets of tab bars aren't working.

Hello, I'm trying to have 2 sets of tab bars Set 1 = Weapons, inventory, abilities, starships, vehicles, etc Set 2 = Armor/Clothing/mods Here's what I've got: HTML: (This works) - When I click a button it swaps the Div to the appropriate sheet beneath the navigation bar. <input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab" value="character" /> <div style="width: 250px; font-size: 12px; margin: left;"> <table> <tr> <td><button type="action" name="act_meleesheet1" style="width: 110px; font-size: 12px; background-color: #00004d; color: #87ceeb;" >Strength Weapons</button></td> <td><button type="action" name="act_featsheet1" style="width: 100px; font-size: 12px; background-color: #00004d; color: #87ceeb;" >Feats</button></td> <td><button type="action" name="act_buffsheet1" style="width: 100px; font-size: 12px; background-color: #00004d; color: #87ceeb;" >Buffs</button></td> <td><button type="action" name="act_starshipsheet1" style="width: 100px; font-size: 12px; background-color: #00004d; color: #87ceeb;" >Starship</button></td> </tr> <tr> <td><button type="action" name="act_armorsheet1" style="width: 110px; font-size: 12px; background-color: #00004d; color: #87ceeb;" >Armor Equipment</button></td> <td><button type="action" name="act_abilitysheet1" style="width: 100px; font-size: 12px; background-color: #00004d; color: #87ceeb;" >Abilities</button></td> <td><button type="action" name="act_relsheet1" style="width: 100px; font-size: 12px; background-color: #00004d; color: #87ceeb;" >Relationships</button></td> <td><button type="action" name="act_speedersheet1" style="width: 100px; font-size: 12px; background-color: #00004d; color: #87ceeb;" >Land Vehicles</button></td> </tr> <tr> <td><button type="action" name="act_rangesheet1" style="width: 110px; font-size: 12px; background-color: #00004d; color: #87ceeb;" >Dexterity Weapons</button></td> <td><button type="action" name="act_inventsheet1" style="width: 100px; font-size: 12px; background-color: #00004d; color: #87ceeb;" >Inventory</button></td> <td><button type="action" name="act_titlesheet1" style="width: 100px; font-size: 12px; background-color: #00004d; color: #87ceeb;" >Titles </button></td> <td><button type="action" name="act_factionsheet1" style="width: 100px; font-size: 12px; background-color: #00004d; color: #87ceeb;" >Factions </button></td> </tr> </table> </div> const buttonlist = ["meleesheet1","rangesheet1","armorsheet1", "inventsheet1", "featsheet1", "buffsheet1", "relsheet1", "abilitysheet1", "starshipsheet1", "speedersheet1", "titlesheet1", "factionsheet1", "armorset1sheet1", "armorset2sheet1", "armorset3sheet1", "armorset4sheet1", "armorset5sheet1"]; buttonlist.forEach(button => { on(`clicked:${button}`, function() { setAttrs({ sheetTab: button }); }); }); CSS: (Working) /*Configure the tab buttons*/ .charsheet .melee-sheet, .charsheet .range-sheet, .charsheet .armor-sheet, .charsheet .invent-sheet, .charsheet .feat-sheet, .charsheet .vehicle-sheet, .charsheet .buffs-sheet, .charsheet .ship-sheet, .charsheet .rel-sheet, .charsheet .chartitle-sheet, .charsheet .faction-sheet, .charsheet .ability-sheet { display: none; } /* show the selected tab */ .charsheet .sheet-tabstoggle[value="meleesheet1"] ~ div.melee-sheet, .charsheet .sheet-tabstoggle[value="rangesheet1"] ~ div.range-sheet, .charsheet .sheet-tabstoggle[value="armorsheet1"] ~ div.armor-sheet, .charsheet .sheet-tabstoggle[value="inventsheet1"] ~ div.invent-sheet, .charsheet .sheet-tabstoggle[value="featsheet1"] ~ div.feat-sheet, .charsheet .sheet-tabstoggle[value="buffsheet1"] ~ div.buffs-sheet, .charsheet .sheet-tabstoggle[value="relsheet1"] ~ div.rel-sheet, .charsheet .sheet-tabstoggle[value="titlesheet1"] ~ div.chartitle-sheet, .charsheet .sheet-tabstoggle[value="abilitysheet1"] ~ div.ability-sheet, .charsheet .sheet-tabstoggle[value="starshipsheet1"] ~ div.ship-sheet, .charsheet .sheet-tabstoggle[value="starshipsheet2"] ~ div.ship-sheetpg2, .charsheet .sheet-tabstoggle[value="factionsheet1"] ~ div.faction-sheet, .charsheet .sheet-tabstoggle[value="speedersheet1"] ~ div.vehicle-sheet { display: block; } OK, now for what's NOT working: HTML: <input type="show" class="sheet-tabstoggle2" name="attr_sheetTab2" value="character" /> <div style="width: 250px; font-size: 12px; margin: left;"> <table> <tr> <td><button type="action" name="act_armorset1sheet1" style="width: 110px; font-size: 12px; background-color: #00004d; color: #00ce00;" >Outfit 1</button></td> <td><button type="action" name="act_armorset2sheet1" style="width: 100px; font-size: 12px; background-color: #00004d; color: #00ce00;" >Outfit 2</button></td> <td><button type="action" name="act_armorset3sheet1" style="width: 100px; font-size: 12px; background-color: #00004d; color: #00ce00;" >Outfit 3</button></td> </tr> <tr> <td><button type="action" name="act_armorset4sheet1" style="width: 100px; font-size: 12px; background-color: #00004d; color: #00ce00;" >Outfit 4</button></td> <td><button type="action" name="act_armorset5sheet1" style="width: 100px; font-size: 12px; background-color: #00004d; color: #00ce00;" >Outfit 5</button></td> </tr> </table> </div> CSS: (Not working) .charsheet .armorset1, .charsheet .armorset2, .charsheet .armorset3, .charsheet .armorset4, .charsheet .armorset5 { display: none; } .charsheet .sheet-tabstoggle2[value="armorset1sheet1"] ~ div.armorset1, .charsheet .sheet-tabstoggle2[value="armorset2sheet1"] ~ div.armorset2, .charsheet .sheet-tabstoggle2[value="armorset3sheet1"] ~ div.armorset3, .charsheet .sheet-tabstoggle2[value="armorset4sheet1"] ~ div.armorset4, .charsheet .sheet-tabstoggle2[value="armorset5sheet1"] ~ div.armorset5 { display: block; } So I'm right now spinning my wheels and aggrievated that this shit is so complicated and it should be as simple as "Drag box onto screen" and its not.  Its 2026, and we have to write .charsheet .sheet-tabtoggle[value="value"] 20 times to make sure each cross reference is properly sighted instead of a modular design that literally streamlines this process with as few errors as possible. Rant aside...What am I missing with this? How do I fix this?

Your sheetworker is setting "sheetTab" but your newly added tabs use "sheetTab2".  I would create a new sheetworker that handles your new tabs specifically and sets "sheetTab2".  Basically just duplicate the original sheetworker but only use the new tab attrs and action buttons names.  Make sure to remove the new tab action button names and attrs from the old sheetworker.

Yeah that's not working chief. The 2nd navigation is not displaying properly / at all and now the 1st navigation doesn't work either. When I click the navigation it doesn't display anything. Here is what the box looks like after the changes: (I made a shaded background to illustrate the "size" of the div the navigation should cover / display.) What I'm seeing is that for Navigation 1, it fully displays despite the divs have the "Display: none;" value in the CSS. But for Navigation 2, it doesn't display whenever I press the buttons. So I'm contending with 2 different proble ms. 1. One navigation works, the other doesn't. If I separate the two then both don't work. const buttonlist = ["meleesheet1","rangesheet1","armorsheet1", "inventsheet1", "featsheet1", "buffsheet1", "relsheet1", "abilitysheet1", "starshipsheet1", "speedersheet1", "titlesheet1", "factionsheet1"]; buttonlist.forEach(button => { on(`clicked:${button}`, function() { setAttrs({ sheetTab: button }); }); }); Adding this part BREAKS the above part. const buttonlist = ["outfit1sheet1", "outfit2sheet1", "outfit3sheet1", "outfit4sheet1", "outfit5sheet1"]; buttonlist.forEach(button => { on(`clicked:${button}`, function() { setAttrs({ sheetTab2: button }); }); }); 2. The divs aren't displaying when clicked Example 1: (Works) <div class="melee-sheet"> <table cellpadding="10" cellspacing="0"> <tr> <td colspan="3" class="sheet-statlabel-big-gray" style="font-size: 1.5em; width: 450px;">Strength Weapons</td> </tr> </table> etc etc... Example 2: (Doesn't display. ) <div class="of1"> <table cellpadding="0" cellspacing="0"> <tr> <td><input class="sheet-inputbox" type="text" name="attr_suitset1" style="height: 24px; width: 250px;" Value="Outfit 1"></td> </tr> </table> <table> <tr> <th>Primary</th> <th>Resistances</th> </tr>      etc etc etc... I suspect the two problems are linked, but IDK how as I've scrutinized the code over and over and replicated everything that allowed for one scenario to happen but it breaks both. This doesn't make any sense to me.

Your second sheetworker also needs use a new variable name; example; const buttonlist2 = ["outfit1sheet1", "outfit2sheet1", "outfit3sheet1", "outfit4sheet1", "outfit5sheet1"]; buttonlist2.forEach(button => { on(`clicked:${button}`, function() { setAttrs({ sheetTab2: button }); }); }); Try that.  If that doesn't work there might also be an issue(s) with your CSS vs the actual HTML path as well.

That did the trick! Thank you, vÍnce!