JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  </head>

 <!--------------------- Body ------------------------------->
  
  <body>

 <img vspace = '40px'>
 <div>
  <span style="color:black; font-family:Georgia,serif;font-size:30px;font-style:regular;">Select Section: </span>
  <select id='selectSection'>
     <option value="">--Please choose an option--</option>
     <option value="a">A</option>
     <option value="b">B</option>
   </select>
  </div>
<!-------------- Topic Select-------------------->
 <img vspace = '40px'>
 <div id="selectOptionDiv" class="bodydiv">
  </div>
 <img vspace = '5px'>
  
  <!-------------- Enter status text box -------------------->
  <div id='textbox' class="bodydiv"> </div>
  <img vspace = '5px'>
    
  <!-- horizontal divider -->
  
  <!-------------- Success Failure -------------------->
  <div id='statuscondition' class="bodydiv"></div>
  <img vspace = '5px'>
  
  <!-------------- Status History -------------------->
  <div id='mainbody' class="bodydiv">
  </div>
  
</body>

<!-------------- Select Script -------------------->
<script>
         // Select Section
         $("#selectSection").change(function() {
        // varible to hold string
        var str = "";
        var val = "";
        $("select option:selected").each(function() {
            str += $(this).text() + " ";
            val = $(this).val();
        });
        updateSelectOption(str,val);
        }).change();
        
        // Select option for topic
        $("#selecta").change(function() {
        // varible to hold string
        console.log("changed");
        var str = "";
        var val = "";
        $("select option:selected").each(function() {
            str += $(this).text() + " ";
            val = $(this).val();
        });
        var divbox = document.getElementById('textbox');
        divbox.innerHTML ="<span style='color:black;...