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 covered(){
    var trainingType=document.getElementById("trainingType");
    
    var element = document.createElement("span");
    trainingType.appendChild(element);
    
    var class_div1 = document.createElement("div");
    class_div1.setAttribute("class","col-md-8");
    element.appendChild(class_div1);
    
    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","typeCovered"); 
    covered.setAttribute("id","typeCovered"); 
    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 training=document.createElement("option");
    training.setAttribute("value","Training"); 
    optgroup.appendChild(training);
    training.innerHTML += "Training";
    var seminar=document.createElement("option");
    seminar.setAttribute("value","Seminar"); 
    optgroup.appendChild(seminar);
    seminar.innerHTML += "Seminar";
    var course=document.createElement("option");
    course.setAttribute("value","Course"); 
    optgroup.appendChild(course);
    course.innerHTML += "Course";
    var talk=document.createElement("option");
    talk.setAttribute("value","Talk"); 
    optgroup.appendChild(talk);
    talk.innerHTML += "Talk";
    var errors = document.createElement("div"); 
    errors.setAttribute("class","help-block with-errors"); 
    class_div8.appendChild(errors);
}

function removeCovered(){
    var trainingType = document.getElementById("trainingType");
    var lastChild =...