JSFiddle - React, Tailwind, and code Playground
HTML
<div class="hardwareValidation">
<div class="select">
<label for="hwA-qty">Quantity</label><br />
<label>1 <input type="radio" name="hwA-qty" value="1" /></label>
<label>2 <input type="radio" name="hwA-qty" value="2" /></label>
<label>3 <input type="radio" name="hwA-qty" value="3" /></label>
<label>4 <input type="radio" name="hwA-qty" value="4" /></label>
<label>5 <input type="radio" name="hwA-qty" value="5" /></label>
</div>
<fieldset id="hwA-1">
<div class="input">
<label for="hwA-1-serial">#1 - Box Serial Number</label><br />
<input type="text" name="hwA-1-serial" id="hwA-1-serial" />
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="hwA-1-override" value=""> Override Validation
</label>
</div>
</fieldset>
<fieldset id="hwA-2">
<div class="input">
<label for="hwA-2-serial">#2 - Box Serial Number</label><br />
<input type="text" name="hwA-2-serial" id="hwA-2-serial" />
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="hwA-2-override" value=""> Override Validation
</label>
</div>
</fieldset>
<fieldset id="hwA-3">
<div class="input">
<label for="hwA-2-serial">#3 - Box Serial Number</label><br />
<input type="text" name="hwA-2-serial" id="hwA-2-serial" />
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="hwA-2-override" value=""> Override Validation
</label>
</div>
</fieldset>
<fieldset id="hwA-4">
<div class="input">
<label for="hwA-2-serial">#4 - Box Serial Number</label><br />
<input type="text" name="hwA-2-serial" id="hwA-2-serial" />
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="hwA-2-override" value=""> Override Validation
</label>
</div>
</fieldset>
<fieldset id="hwA-5">
<div class="input">
...
JavaScript
$('input[name="hwA-qty"]').click(function(){
var selected = $(this).val();
$("fieldset[id^='hwA-']").show();
$("#hwA-" + selected).nextAll().hide();
});
$('input[name="hwA-qty"]:checked').trigger("click");