Reset counter if value of form elements change and vice versa

[Giggles]

I need to input a large number of business rules to address every permutation of several different combinations. I created a function to automatically generate and loop through the relevant combinations, but I'd like to be able to change the counter if I want to skip some combinations. I had originally planned on manually selecting each combination, and each array therefore also has a corresponding form element. The script for the arrays as well the one for the form elements both write the current combination to target div's (i.e. \[code\]id='current_body_part'\[/code\] and \[code\]id='current_description'\[/code\]), and both functions can also use the text displayed to programmatically set the array counters/form element values (so that I can easily pick up where I last left off by setting it with values already added to the db) How can I modify these functions so that 1) the array counters are reset accordingly if the form elements change and 2) the values of the form elements change as the counters change? I've posted a fiddle with both functions here: http://jsfiddle.net/chayacooper/9jERn/60/Functions which loops through the arrays \[code\]$(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; } } });});\[/code\]Functions for form elements\[code\] $('select[name="body_part"]').change(function () { writeVal(); current_description.innerHTML = ''; $('input[name="current_description"]').val(''); }); $('input:radio[name="description"]').change(function () { writeVal(); });function writeVal() { var body_part = $("select[name=body_part] option:selected").val(); current_body_part.innerHTML = body_part; $('input[name="current_body_part"]').val(body_part); var description = $("input:radio[name=description]:checked").val(); current_description.innerHTML = description; $('input[name="current_description"]').val(description); }\[/code\]