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

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 Training";
    var optgroup=document.createElement("optgroup"); 
    covered.appendChild(optgroup);
    var briefing=document.createElement("option");
    briefing.setAttribute("value","Briefing"); 
    optgroup.appendChild(briefing);
    briefing.innerHTML = "Briefing";
    var forum=document.createElement("option");
    forum.setAttribute("value","Forum"); 
    optgroup.appendChild(forum);
    forum.innerHTML += "Forum";
    var summit=document.createElement("option");
    summit.setAttribute("value","Summit"); 
    optgroup.appendChild(summit);
    summit.innerHTML += "Summit";
    var conference=document.createElement("option");
    conference.setAttribute("value","Conference"); 
    optgroup.appendChild(conference);
    conference.innerHTML += "Conference";
    var assembly=document.createElement("option");
    assembly.setAttribute("value","Assembly"); 
    optgroup.appendChild(assembly);
    assembly.innerHTML += "Assembly";
    var symposium=document.createElement("option");
    symposium.setAttribute("value","Symposium"); 
    optgroup.appendChild(symposium);
    symposium.innerHTML += "Symposium";
    var...