JSFiddle - React, Tailwind, and code Playground

by Patrick Robles

HTML

<input type="radio" id="vLeave" name="leaveType" value="Vacation Leave">Vacation Leave
<input type="radio" id="sLeave" name="leaveType" value="Sick Leave">Sick Leave
<input type="radio" id="eLeave" name="leaveType" value="Emergency Leave">Emergency Leave
<input type="radio" name="leaveType" id="others">
Others
<input type="hidden" id="otherCount">
<span id="otherChoices"></span>

JavaScript

$('#others').click(function() {
    if( $('#otherCount').val() == 0){
    $('#otherCount').val(1);
    var choices = document.getElementById("otherChoices");
    var container = document.createElement("span");
        container.setAttribute("id","spanContainer"); 
        choices.appendChild(container);
    var base=document.createElement("select");
        base.setAttribute("name","others"); 
        container.appendChild(base);
     var cplaceholder=document.createElement("option");
        cplaceholder.setAttribute("value",""); 
        cplaceholder.innerHTML = "Select Leave";
        base.appendChild(cplaceholder);
     var choice1=document.createElement("option");
        choice1.setAttribute("value","Maternity"); 
        choice1.innerHTML = "Maternity";
        base.appendChild(choice1);
     var choice2=document.createElement("option");
        choice2.setAttribute("value","Paternity"); 
        choice2.innerHTML = "Paternity";
        base.appendChild(choice2);
     var choice3=document.createElement("option");
        choice3.setAttribute("value","Solo Parent"); 
        choice3.innerHTML = "Solo Parent";
        base.appendChild(choice3);
    var choice4=document.createElement("option");
        choice4.setAttribute("value","Study"); 
        choice4.innerHTML = "Study";
        base.appendChild(choice4);
    var choice5=document.createElement("option");
        choice5.setAttribute("value","LWOP"); 
        choice5.innerHTML = "LWOP";
        base.appendChild(choice5);
    var choice6=document.createElement("option");
        choice6.setAttribute("value","AWOL"); 
        choice6.innerHTML = "AWOL";
        base.appendChild(choice6);
    }
});

$('#vLeave,#sLeave,#eLeave').click(function() {
    
    $('#spanContainer').remove();
    $('#otherCount').val(0);
});