JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="collapsibleset" data-theme="a" data-content-theme="a">
    <div data-role="collapsible">
         <h2>Cost Analysis</h2>

        <fieldset data-role="controlgroup" id="Projectstatus">
            <legend>Project Status:</legend>
            <input type="radio" name="ProjectStatus1" id="all" value="All" checked="checked" />
            <label for="all">All</label>
            <input type="radio" name="ProjectStatus1" id="eurotiles" value="Eurotiles" />
            <label for="eurotiles">Eurotiles</label>
            <input type="radio" name="ProjectStatus1" id="paving" value="Paving" />
            <label for="paving">Paving slabs</label>
            <input type="radio" name="ProjectStatus1" id="blocks" value="Block" />
            <label for="blocks">Blocks</label>
            <input type="radio" name="ProjectStatus1" id="pavers" value="Pavers" />
            <label for="pavers">Pavers</label>
        </fieldset>
        <fieldset data-role="controlgroup" id="CostAnalysis">
            <legend>Date Of Requirement:</legend>
            <input type="radio" name="CostAnalysis" id="DateOR" value="Supply Ex-Factory" checked="checked" />
            <label for="DateOR">Supply Ex-Factory</label>
            <input type="radio" name="CostAnalysis" id="DateOR1" value="Supply & Delivery" />
            <label for="DateOR1">Supply & Delivery</label>
            <input type="radio" name="CostAnalysis" id="DateOR2" value="Supply & Lay" />
            <label for="DateOR2">Supply & Lay</label>
        </fieldset>
        <div id="ul-suplay"></div>
    </div>
</div>

JavaScript

$(function () {
    $('#CostAnalysis input[type=radio]').click(function () {
        var value = $(this).val();

        if (value == "Supply & Lay") {
            $('#ul-suplay').empty();
            $('#ul-suplay').append('<fieldset data-role="controlgroup"> \
    									<legend>Description:</legend> \
    									<input type="radio" name="Desc" id="Desc1" value="on" checked="checked"/> \
   										<label for="Desc1">Preliminaries</label> \
    									<input type="radio" name="Desc" id="Desc2" value="off"/> \
    									<label for="Desc2">Supply Ex-Factory</label> \
    									<input type="radio" name="Desc" id="Desc3" value="other"/> \
    									<label for="Desc3">Delivery</label> \
     									<input type="radio" name="Desc" id="Desc4" value="other"/> \
    									<label for="Desc4">Laying</label> \
     									<input type="radio" name="Desc" id="Desc5" value="other"/> \
   			 							<label for="Desc5">Construction Edge Restraints</label> \
     									<input type="radio" name="Desc" id="Desc6" value="other"/> \
    									<label for="Desc6">Supply And Lay</label> \
										</fieldset> \
 										 \
										<label for="text-basic">Quantity:</label> \
        								<input type="text" name="text-basic" id="text-basic" value="" > \
										<label for="text-basic">UOM:</label> \
        								<input type="text" name="text-basic" id="text-basic" value="" > \
										<label for="text-basic">Rate (RM):</label> \
        								<input type="text" name="text-basic" id="text-basic" value="" > \
										<label for="text-basic">Amount (RM):</label> \
        								<input type="text" name="text-basic" id="text-basic" value="" >');
            $("#ul-suplay").enhanceWithin();

        } else {

            $('#ul-suplay').empty();
            $('#ul-suplay').append('<fieldset data-role="controlgroup" id="CostAnalysis"> \
    									<legend>Unloading:</legend> \
    									<input type="radio" name="unloading" id="yes"...