JSFiddle - React, Tailwind, and code Playground

HTML

<select name="subjects" id="select" class="form-control">
   <option value="">Number of Subjects</option>
   <option value="one">One</option>
   <option value="two">Two</option>
   <option value="three">Three</option>
</select>

<div class="toggle" id="one">
    <div class="row">
        <div class="col-md-3">
             <label>Code 1</label>
             <input type="text" name="scode1" class="form-control">
        </div>

        <div class="col-md-3">
             <label>Name</label>
             <input type="text" name="sname1" class="form-control">
        </div>
    </div>
</div>

<div class="toggle" id="two">
    <div class="row">
        <div class="col-md-3">
             <label>Code 2</label>
             <input type="text" name="scode2" class="form-control">
        </div>

        <div class="col-md-3">
             <label>Name</label>
             <input type="text" name="sname2" class="form-control">
        </div>
    </div>
</div>

<div class="toggle" id="three">
    <div class="row">
        <div class="col-md-3">
             <label>Code 3</label>
             <input type="text" name="scode2" class="form-control">
        </div>

        <div class="col-md-3">
             <label>Name</label>
             <input type="text" name="sname2" class="form-control">
        </div>
    </div>
</div>

CSS

.hidden{
  display: none;
}

JavaScript

$('#select').on("change", function(){
	$(".toggle").css({ "display" : "none"} );
	var val = $(this).val();
  $("#"+val).css({ "display" : "block"} )
})