I'm using the following to show the severity of each wound: <table class="wound-container"> <tr> <td rowspan="2" style="width:64px;vertical-align:center;"> <input type="hidden" name="attr_severity_1" class="severity" value="0" /> <span class="none">None</span> <span class="trivial">Trivial</span> <span class="light">Light</span> <span class="moderate">Moderate</span> <span class="severe">Severe</span> <span class="fatal">Fatal</span> </td> <td> <button type="action" name="act_severity_1_cycleup" class="severity-button up"></button> </td> </tr> <tr> <td> <button type="action" name="act_severity_1_cycledown" class="severity-button down"></button> </td> </tr> </table> <script type="text/worker"> on(`clicked:severity_1_cycleup`, () => { // Check the current value of the hidden attribute. getAttrs(["severity_1"], (v) => { const severityValue = parseInt(v["severity_1"]) || 0; var newVal=severityValue + 1 if(newVal>5){ newVal=5 } // Increment the attribute value by 1, or cycle back to 0 if the incremented value is equal to 4. setAttrs({ "severity_1": newVal }); }); }); on(`clicked:severity_1_cycledown`, () => { // Check the current value of the hidden attribute. getAttrs(["severity_1"], (v) => { const severityValue = parseInt(v["severity_1"]) || 0; var newVal=severityValue - 1 if(newVal<1){ newVal=0 } // Increment the attribute value by 1, or cycle back to 0 if the incremented value is equal to 4. setAttrs({ "severity_1": newVal }); }); }); </script> with CSS: button[type="action"].sheet-severity-button:focus{ outline:none; } .sheet-up{ background:none; padding:0px; font-size:8px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 8px solid black; border-top: 0px solid transparent; display: inline-block; height:2px; } .sheet-down{ background:none; margin-top:2px; padding:0px; font-size:8px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 0px solid transparent; border-top: 8px solid black; display: inline-block; height:2px; } .sheet-none, .sheet-trivial, .sheet-light, .sheet-moderate, .sheet-severe, .sheet-fatal{ display:none; width:64px; margin-top:8px; } input[type="hidden"].sheet-severity[value="0"] ~ .sheet-none, input[type="hidden"].sheet-severity[value="1"] ~ .sheet-trivial, input[type="hidden"].sheet-severity[value="2"] ~ .sheet-light, input[type="hidden"].sheet-severity[value="3"] ~ .sheet-moderate, input[type="hidden"].sheet-severity[value="4"] ~ .sheet-severe, input[type="hidden"].sheet-severity[value="5"] ~ .sheet-fatal{ display:block; } The idea would be to update all the health boxes whenever severity_1_cycleup or severity_1_cycledown was clicked, based on the value of severity_1. actually, logically it would make more sense to update on "change: severity_1"