JSFiddle - React, Tailwind, and code Playground

by jgarber

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<form id="one">
    <input type="checkbox" class="check" id="check-one" value="1" /><label for="check-one">One</label>
    <input type="reset" />
</form>

<form id="two">
    <input type="checkbox" class="check" id="check-two" value="2" /><label for="check-two">Two</label>
</form>

CSS

form { border: 1px solid gray; margin: 1em; }

JavaScript

$('form .check').button();

// Sneak in and check the second button. Button won't appear toggled (white) until a button refresh is triggered.
$('#check-two')[0].checked = "checked";

// Now click the Reset button on Form 1 and watch it also refresh the button in Form 2. The button in Form 2 will turn white (checked).

// If I'm unterstanding the intention of the code correctly, it should only refresh the buttons within the form that's been reset. However, it currently refreshes all buttons on the page.