Loop through 2 arrays on click

by chayacooper

HTML

<div id='current_body_part'>Waist</div> 
<div id='current_body_part_description'>Very_narrow</div> 
<button id='next'>Next</button>
<br/><br/>

           <select name="body_part" >
           <option value="Null">Select</option>
           <option value="Bust" selected=selected>Bust</option>
           <option value="Hips">Hips</option> 
           <option value="Waist" >Waist</option>
           <option value="Height">Height</option> 
           </select>
<br/><br/>
<label><input type="radio" name="body_part_description" value="Very_small" checked="checked" />Very Small</label>
               <label><input type="radio" name="body_part_description" value="Small" />Small</label>
               <label><input type="radio" name="body_part_description" value="Average" />Average</label>
               <label><input type="radio" name="body_part_description" value="Large" />Large</label>
               <label><input type="radio" name="body_part_description" value="Very_large" />Very
 Large</label> 

               <label><input type="radio" name="body_part_description" value="Very_narrow" />Very Narrow</label>
               <label><input type="radio" name="body_part_description" value="Narrow" />Narrow</label>
               <label><input type="radio" name="body_part_description" value="Wide" />Wide</label>               
               <label><input type="radio" name="body_part_description" value="Very_wide" />Very Wide</label>

JavaScript

// Need to set counterBodyPart if empty or current function doesn't work (when set counter dynamically
// Tried -  if (bodyPart[counterBodyPart] === ""){var counterBodyPart=0;}

// If set counter manually need to click twice b4 starts new body part if uses same description array 
// If set dynamically need to doubleclick to start, and sometimes need to double click when switching arrays

$(document).ready(function(){
  var bodyPart = new Array(4);
  bodyPart[0] = "Bust";
  bodyPart[1] = "Waist";
  bodyPart[2] = "Height";
  bodyPart[3] = "Hips";
  //var counterBodyPart=0;  
  // Start counter at value in #body_part
  //To get index for array value - bodyPart.indexOf("Hips"); // 1 
  var counterBodyPart = bodyPart.indexOf(document.getElementById('current_body_part').innerHTML);  
    
    var description1 = new Array;
     description1[0] = "Very_small"
     description1[1] = "Small"
     description1[2] = "Average"
     description1[3] = "Large"
     description1[4] = "Very_large"
     //var description1Number = 0; //array key of current description     
     var description1Number = description1.indexOf(document.getElementById('current_body_part_description').innerHTML);    
    
    var description2 = new Array;
     description2[0] = "Very_narrow"
     description2[1] = "Narrow"
     description2[2] = "Average"
     description2[3] = "Wide"
     description2[4] = "Very_wide"
    // var description2Number = 0; //array key of current description  
     var description2Number = description2.indexOf(document.getElementById('current_body_part_description').innerHTML);     
                
  $('#next').click(function(){   
      if (bodyPart[counterBodyPart] === "Bust" || bodyPart[counterBodyPart] === "Height" ){      
      if (description1Number < description1.length){
  document.getElementById('current_body_part').innerHTML = bodyPart[counterBodyPart];    
  document.getElementById('current_body_part_description').innerHTML = description1[description1Number];    ...