JSFiddle - React, Tailwind, and code Playground

by chayacooper

HTML

<span id='current_description' style="padding-right: 20px">Narrow</span>
<button id='next'>Next</button>
<br/><br/>
</div>    

<select name="body_part" >
    <option value="Null">Select</option>
    <option value="Shoulders" selected=selected>Shoulders</option> 
    <option value="Waist">Waist</option>
    <option value="Height">Height</option> 
</select>
<label><input type="radio" name="description" value="Narrow" checked="checked"/>Narrow</label>
<label><input type="radio" name="description" value="Average" />Average</label>
<label><input type="radio" name="description" value="Wide" />Wide</label> 
<label><input type="radio" name="description" value="Short" />Short</label>
<label><input type="radio" name="description" value="Tall" />Tall</label>

JavaScript

$(document).ready(function(){
    var bodyPart = new Array;
    bodyPart[0] = "Shoulders";
    bodyPart[1] = "Waist";
    bodyPart[2] = "Height";
    var counterBodyPart = bodyPart.indexOf(document.getElementById('current_body_part').innerHTML); 
    var description1 = new Array;
    description1[0] = "Narrow"
    description1[1] = "Average"
    description1[2] = "Wide"     
    var description1Number = description1.indexOf(document.getElementById('current_description').innerHTML);  
    var description2 = new Array;
    description2[0] = "Short"
    description2[1] = "Average"
    description2[2] = "Tall"
    var description2Number = description2.indexOf(document.getElementById('current_description').innerHTML);     

  $('#next').click(function(){   
      if (bodyPart[counterBodyPart] === "Shoulders" || bodyPart[counterBodyPart] === "Waist" ){      
      if (description1Number < description1.length){
  document.getElementById('current_body_part').innerHTML = bodyPart[counterBodyPart];    
  document.getElementById('current_description').innerHTML = description1[description1Number];       
       description1Number++           
         description2Number = 0;    
      } else if (counterBodyPart < bodyPart.length){
  document.getElementById('current_body_part').innerHTML = bodyPart[counterBodyPart];       
       counterBodyPart++;
       description1Number = 0;
      } 
  }         
      if (bodyPart[counterBodyPart] === "Height"){      
      if (description2Number < description2.length){
  document.getElementById('current_body_part').innerHTML = bodyPart[counterBodyPart];    
  document.getElementById('current_description').innerHTML = description2[description2Number];       
       description2Number++ 
         description1Number = 0;          
      } else if (counterBodyPart < bodyPart.length){
  document.getElementById('current_body_part').innerHTML = bodyPart[counterBodyPart];       
       counterBodyPart++;
       description2Number = 0;
      } 
...