JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<p>
<button class="btn btn-primary" id="process">Process</button>
</p>
<form id="form_process" method="post">
<h4>Process</h4>
<input type="radio" name="data" id="data" value="test1"><span title="Hello Test1">TEST1</span>
<input type="radio" title="Hello Test2" name="data" id="data" value="test2"><span title="Hello Test2">TEST2</span>
<input type="radio" title="Hello Test3" name="data" id="data" value="test3"><span title="Hello Test3">TEST3</span>
<input type="radio" name="data" title="Hello Test4" id="data" value="test4"><span title="Hello Test4">TEST4</span>
<input type='hidden' name='action' value='process'>
<button class="btn btn-success" id="submit">Submit</button>
</form>
CSS
body {
padding: 10px;
}
button {
margin: 4px;
}
form {
display: none;
}
form input {
display: inline-block;
}
#submit {
display:block;
margin: 4px;
}
JavaScript
$('.btn-primary').click(function () {
$('.btn-primary').removeClass('currentButton')
$(this).addClass('currentButton')
$('form').hide()
$("#form_" + $(this).attr('id')).show();
})