JSFiddle - React, Tailwind, and code Playground

HTML

<div class="centerthis">
        
        <form method="post" action="~/AJAXcalls/InsWrkOAJAX.cshtml">
            <div class="insertWorkoutFormHolder">
                <div class="exerciseTypeDiv">
                    <input type="radio" name="Type" id="typ4" value="4" class="radioSelectLeft">
                    <label class="radioLabel" for="typ4">Primary</label>
                    <input type="radio" name="Type" id="typ5" value="5" class="radioSelect" />
                    <label class="radioLabel" for="typ5">Secondary</label>
                    <input type="radio" name="Type" id="typ6" value="6" class="radioSelect" />
                    <label class="radioLabel" for="typ6">Assistance</label>
                </div>

                <div class="movementTypeDiv hideThis">
                    <div class="hideThis inlineBlock">
                        <input class="radioSelectLeft" type="radio" name="Exercise" id="hej1" value="1" />
                        <label class="radioLabel squat" for="hej1">Squat</label>
                    </div>

                    <div class="hideThis inlineBlock">
                        <input class="radioSelect" type="radio" name="Exercise" id="hej2" value="2" />
                        <label class="radioLabel benchpress" for="hej2">Benchpress</label>
                    </div>

                    <div class="hideThis inlineBlock">
                        <input class="radioSelect" type="radio" name="Exercise" id="hej3" value="3" />
                        <label class="radioLabel deadlift" for="hej3">Deadlift</label>
                    </div>
                </div>
                <div id="dropdown">
                    
                    <select id="exerVariNameS" name="exerVariNameS" class="hideThis workoutVariSelect insertWorkoutBoxes">
                        
                            <option  value="">Squat</option>
                        }
                    </select>
                    
                   ...

CSS

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0; 
}

body {
    background-color: white;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}


a {
    text-decoration: none;
    color: black;
}

.validation-summary-errors {
    font-weight:bold; 
    color:red; 
    font-size: 11pt;
}

header, footer, hgroup,
nav, section {
    display: block;
}

mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}

.bold {
    font-weight: bold;
}

.bolder {
    font-weight: bolder;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
/*Viewworkout page*/
.squatColor {
    color: #8c479a;
    font-weight: bold;
}

.benchColor {
    color: #2482c5;
    font-weight: bold;
}

.deadliftColor {
    color: #f96716;
    font-weight: bold;
    
}

.blackColor {
    color: #000;
    font-weight: bold;
}

.whiteColor {
    color: #fff;
    font-weight: bold;
}

.showDate {
    text-transform: capitalize;
    font-weight: bold;
    font-size: 18px;
}

.capitalFirst {
    text-transform: capitalize;
}

.metricDateTextbox {
    width: 150px;
    padding: 11px;
    font-size: 16px;
    border: 1px solid white;
    color: transparent;
    text-shadow: 0 0 0 black;    
    font-family: Verdana;   
    font-weight: 500;
    background: #fff center right 10px no-repeat url('Images/pil.jpg'); 
    background-size: 12px 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
    vertical-align: middle;
    box-sizing:border-box;
}

.viewWorkoutDateBox {
    width: 150px;
    padding:...

JavaScript

$(function() {
            $("input[type='radio']").change(function() {
                if ($(this).val() == 1  && this.checked) {
                    $("#exerVariNameS").show();
                    $("#exerVariNameB").hide();
                    $("#exerVariNameD").hide();
                    $("#exerVariNameA").hide();
                } else if ($(this).val() == 2  && this.checked){
                    $("#exerVariNameS").hide();
                    $("#exerVariNameB").show();
                    $("#exerVariNameD").hide();
                    $("#exerVariNameA").hide();
                } else if ($(this).val() == 3  && this.checked) {
                    $("#exerVariNameS").hide();
                    $("#exerVariNameB").hide();
                    $("#exerVariNameD").show();
                    $("#exerVariNameA").hide();
                }
            });

            $("input[name='Type']").click(function(){
            		var value=$(this).val();
                switch(value){
                	case '4':
                  	$("input[name='Exercise']").each(function(){
                    	$(this).closest('div').show();
                    });
                    $('#dropdown').hide();
                    $('#exerVariNameA').hide();
                    $("#dailyPR").hide();
                    $(".movementTypeDiv").show();
                    break;
                    case '5':
                        $("input[name='Exercise']").each(function(){
                          $(this).closest('div').show();
                        });
                        $('#dropdown').show();
                        $('#exerVariNameA').hide();
                        $("#dailyPR").show();
                        $(".movementTypeDiv").show();
                    break;
                  case '6':
                    $("input[name='Exercise']").each(function(){
                      $(this).closest('div').hide();
                    });
                    $('#dropdown').hide();
...