Loop through 2 arrays on click

by chayacooper

HTML

<div style="color: blue; font-weight: bold">Current Combination:</div>
<div>
<span id='current_body_part'>Waist</span>
 <span style="font-weight:bold">: </span>
<span id='current_body_part_description'>Very_narrow</span> 
    <button id='next'>Next</button>
    <br/>
    <br/>
</div>

<div style="color: blue; font-weight: bold">Select Combination Manually:</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>
<br/>
<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>
<br/>
<label>
    <input type="radio" name="body_part_description" value="Short" />Short</label>
<label>
    <input type="radio" name="body_part_description" value="Average" />Average</label>
<label>
    <input type="radio" name="body_part_description" value="Tall" />Tall</label>
<br/>
<br/>

JavaScript

// Functions for arrays
// Must currently click 'Next' twice to start loop (result of script which sets counter dynamically) 
$(document).ready(function () {

    var bodyPart = new Array("Shoulders", "Waist", "Height");
    // Start counter at value in #current_body_part    
    var counterBodyPart = bodyPart.indexOf(document.getElementById('current_body_part').innerHTML);

    var description1 = new Array("Very_narrow", "Narrow", "Average", "Wide", "Very_wide");
    // Start counter at value in #current_description   
    var description1Number = description1.indexOf(document.getElementById('current_body_part_description').innerHTML);

    var description2 = new Array("Short", "Average", "Tall");
    // Start counter at value in #current_description  
    var description2Number = description2.indexOf(document.getElementById('current_body_part_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_body_part_description').innerHTML = description1[description1Number];
                description1Number++
                // Reset other counters (required if initial counter value set dynamically)  
                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];
               ...