JSFiddle - React, Tailwind, and code Playground

by Patrick Robles

HTML

<div class="col-md-4 form-group">
    <select name="typeTraining" id="typeTraining" class="form-control" required>
        <option  value="" selected="">Select Type of Training</option>
        <optgroup>
            <option value="Covered by Service Contract">
                Covered by Service Contract 
            </option>
            <option value="Not Covered by Service Contract">
                Not Covered by Service Contract
            </optgroup>
        </select>
        <div class="help-block with-errors"></div>
    </div>
    
    <span id = "trainingType"></span>	
    <span id = "trainingType_2"></span>

JavaScript

$('#typeNotCovered').change(function() {
    var choice =  $('#typeNotCovered option:selected').val();
    if(choice == 'Others'){
        alert('hey');
        othersNotCovered();
    }
    else{
        
        removeOthersNotCovered();
    }
});

function othersNotCovered(){
    var others_notCovered=document.getElementById("others_notCovered");
    
    var element = document.createElement("span");
    others_notCovered.appendChild(element);
    
    var class_div1 = document.createElement("div");
    class_div1.setAttribute("class","col-md-15 form-group");
    element.appendChild(class_div1);
    var element1=document.createElement("input");
    element1.setAttribute("class","form-control");
    element1.setAttribute("type","text");
    element1.setAttribute("name","notCoveredOthers");  
    element1.setAttribute("placeholder","Please Specify...");   
    element1.required = true;
    class_div1.appendChild(element1);
}

function removeOthersNotCovered(){
    var others_notCovered = document.getElementById("others_notCovered");
    var lastChild = others_notCovered.lastChild;
    others_notCovered.removeChild(lastChild);
}

function notCovered(){
    var trainingType=document.getElementById("trainingType_2");
    
    var element = document.createElement("span");
    trainingType.appendChild(element);
    
    var class_div8 = document.createElement("div");
    class_div8.setAttribute("class","col-md-4 form-group");
    element.appendChild(class_div8);
    var covered=document.createElement("select"); 
    covered.setAttribute("class","form-control");
    covered.setAttribute("type","text"); 
    covered.setAttribute("name","typeNotCovered"); 
    covered.setAttribute("id","typeNotCovered"); 
    covered.required = true;
    class_div8.appendChild(covered);
    var select=document.createElement("option");
    select.setAttribute("value",""); 
    select.setAttribute("selected",""); 
    covered.appendChild(select);
    select.innerHTML += "Select...