JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div id="parent" class="no-print">
            <h3 class='questions'>Vragenlijst Creëren</h3>
            <div id="content" >
                <form name="question" class='q_0'>
                    <br>
                    <div id="div_Form">
                        <div>
                            <div name="question" id="form_List">
                                <br>
                                <input autofocus name="title" type="text"                    
                                       id="title" value="Titel" onfocus="
                                           if(this.value==this.defaultValue)this.value='';" onblur="
                                           if(this.value=='')this.value=this.defaultValue"/>
                            </div> 
                        </div>
                        <div>
                            <div id="form_Content">
                                <br>
                                <div class="letter"></div><textarea name="content" type="text" class="list content" value="Vraag"
                                          onfocus="if(this.value==this.defaultValue)this.value='';"
                                          onblur="if(this.value=='')this.value='Vraag/Omschrijving';">
                                </textarea>
                            </div>
                        </div>
                    </div>

                    <div>
                        <label>Vraagsoort:</label>
                        <div id="form_list">
                            <select class="select">
                                <option value="text">Text</option>
                                <option value="scale">Scale</option>
                                <option value="checkbox_">Checkboxes</option>
                                <option value="mp_">Multiple-Choice</option>
                                <option value="Choose from a list">Choose from a list</option>
                             ...

CSS

body{
    margin: 0px 0px 0px 0px;
    font-family: Verdana;
    background-color: #e3f2f8;
}
iframe {  
    width: 1200px;
    height: 650px;   
    margin: 80px 0px 0px 0px;
    display: block;
}
img#male { 
    width: 147px;
    height: 183px;
    display: none;
    z-index: 5;
    opacity: 1;
}
img#female {
    width: 147px;
    height: 183px;
    display: none;
    z-index: 3;
    opacity: 0;
}
input#submit{
    margin: auto;
    display: block;
}
label {
    float: left;
    width: 13em;
    font-style: normal;
}
dt.leftsidelist {
    margin-left:25px; 
}
div#navbar{
    width: 99.9999%;
    height: 3.5em;
    float: top;
    font-size: 0.8em;
    border-radius: 0 0 10px 10px;
    -webkit-box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, .4);
    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .4);
}
div#navbar div{
    width: 16.5%;
    margin: 0.5em 0em 0em 0em;
    text-align: center;
    float: left;
}
div#navbar div a{
    text-decoration: none;
    text-align: center;
    color: black;
}
a#admin {
    font-size: 0.8em;
    font-weight: bold;
    float: right;
    text-decoration: none;
    color: blue;
    margin: 5px 7px;
}
a#admin:hover{
    text-decoration: underline;
}

div#navbar div a:hover{
    text-decoration: underline;
}
div#leftside {
    width: 150px;
    height: auto;
    float: left;
    padding-left: 10px;
    text-align: left;
}
div#leftside a{
    color: black;
    text-decoration: none;
    font-size: 0.6em;
}
div#leftside a:hover{
    text-decoration: underline;
}
div#Footer{
    

}
div#topbox{
    width: 135px;
    height: 600px;
    margin: 10px 0px 0px 10px; 
    float: left;
}
div#parent {  
    width: 70%;
    height: 50%;
    min-height:70%;
    min-width: 720px;
    margin: 0 auto 15px auto;
    border-radius: 0 0 10px 10px;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .4);
    box-shadow: 0 0 5px 0px rgba(0, 0, 0,...

JavaScript

$(document).ready(function () {
    var clonedForm = $('form').clone();
    var counter = 1;
    var clone = $('#mp_0 div[name^="answer"]');
    var clone1 = $('#checkbox_0 div').children().clone();
    
    $('.removecb').hide();

    $(document).on("click", '.addAnswer', function () {
        var idx = $(this).siblings('[id^="mp_"]:last').find(' div[name^="answer"]:last').index();
        var newField = $(clone).clone().attr('class', 'content answer_' + idx);

        $(this).siblings('[id^="mp_"]:last').append(newField);

        $('.content div textarea:last').attr('class', 'content answer_' + idx);

        $(this).siblings('.removeAnswer').show();

        var string = $(newField).find('b');
        $(string).empty().prepend(String.fromCharCode(65 + idx) + ". ");
        if (idx == 2) {
            //$('.removeAnswer').show();
        }

        idx++;
        return false;
    });

    $(document).on("click", ".removeAnswer", function (e) {
        var idx = $('[id^="mp_"]:last div[name^="answer"]:last').index() - 1;

        $('div[id^="checkbox_"]:last input[type="text"]:last, div[id^="checkbox_"] [type="checkbox"]:last').remove();

        var idx = $('[id^="mp_"]:last div[name^="answer"]:last').index() + 1;
        
        if (idx == 2) {
            $('.removeAnswer').hide();
        } 
        e.preventDefault();
    });

    $(document).on("click", ".addcb", function(e) {
    	var idx = $(this).siblings('div[id^="checkbox_"] div').find('.checkbox:last').length;
    	var newCB = $(clone1).clone();
        
    	$('div[id^="checkbox_"] div input[type="text"]:last').attr('name', 'checkbox_'+counter);
        
        $('.removecb').show();
        
    	$('[id^="checkbox_"]:last div').append(newCB);
        e.preventDefault();
        
        counter++;
    });

    $(document).on("click", ".removecb", function(e) {
        
        if (counter !=1) {
            $('input[type="checkbox"]:last').remove();
           ...