JSFiddle - React, Tailwind, and code Playground

by rao b

HTML

<div data-role="page" id="DialogIncidentCostCentre">
        <div data-role="header" data-position="fixed">
            <h1>Cost Centre</h1>
        </div>
        <div data-role="main" class="ui-content">
            
            <!--<div id="costCenterDiv"></div>-->
            <form id="Demo">
                    <input type="radio" name="Gender" value="Male" /> Male <br />
                    <input type="radio" name="Gender" value="Female" /> Female<br />
                    <input type="radio" name="Gender" value="others" /> others <br />
             </form>
            </div>
        <div data-role="footer" data-position="fixed">
            <a href="#incidentsPage" class="ui-btn">Cancel</a>
            <a href='#' id="nextButton" class="ui-btn" data-transition="slide">Next</a>
        </div>
    </div>

<form id="Demo">
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female<br />
<input type="radio" name="Gender" value="others" /> others <br />
</form>

JavaScript

createRadioButton("01", "Reading");
 createRadioButton("02", "London");
 createRadioButton("03", "Theale");
 createRadioButton("04", "Hounslow");




function createRadioButton(CostCode, CCName) {
    var radioBtn = $(' <input type="radio" name="costCenterName" id="' + CostCode + '" class = "costCenterClass" value= "radio button">' + CostCode + " " + CCName + '</input></br> ');
    radioBtn.appendTo('#Demo');

}



 $(document).ready(function(){
       
     $('#nextButton').attr("disabled", "disabled");
     
        $('#Demo input').on('change', function() {
            alert($('input[name="Gender"]:checked', '#Demo').val());
        });
     

    });


     $('#nextButton').click(function(){
   alert("next button clicked") ;
});