How can I modify this Replace function to use arrays instead?

How can I modify this Replace function to use arrays instead?

I need to modify this Replace function to use arrays, but haven't been able to figure out how to do that.

This function allows the text and 2 sets of items to be replaced when a user clicks on an element, and each set of items includes an image and it's associated value (which will then be added to the customer's profile and be inserted into a database). I can't figure out how to modify the code to use arrays instead or how to advance past the 2nd set.

This is part of a taste questionnaire which asks users to select the style they prefer from a series of pairs, and the specific pairings shown changes based upon the items previously selected.  I have 12 arrays of 20 images, and was previously directing which image would be displayed from an array with the code below which had each 'Select' button trigger onclick="javascript:manipulateDOM()", however that didn't allow me to identify the value selected and is somewhat cumbersome. In addition that code didn't allow me to direct different choices based on the user's selection. 

(Partial) Replace Function
  1.   <script type="text/javascript" language="javascript">
  2.        $(document).ready(function () {
  3.            $("#trendyButton").click(function () {
  4.                var newSrc = $("#imgtrendy").attr("src").replace("z1", "z14");
  5.                $("#imgtrendy").attr("src", newSrc);
  6.                var newSrc2 = $("#imgclassic").attr("src").replace("z2", "z12");
  7.                $("#imgclassic").attr("src", newSrc2);
  8.                var que = $("#question").text().replace("Question 1", "Question 2");
  9.                $("#question").text(que);
  10.                var imgvalue = $("#imgtrendy").attr("value");
  11.                $("#picval").text(imgvalue);
  12.            });
  13.            $("#classicButton").click(function () {
  14.                var newSrc = $("#imgtrendy").attr("src").replace("z1", "z4");
  15.                $("#imgtrendy").attr("src", newSrc);
  16.                var newSrc2 = $("#imgclassic").attr("src").replace("z2", "z3");
  17.                $("#imgclassic").attr("src", newSrc2);
  18.                var que = $("#question").text().replace("Question 1", "Question 2");
  19.                $("#question").text(que);
  20.                var imgvalue = $("#imgclassic").attr("value");
  21.                $("#picval").text(imgvalue);
  22.            });
  23.        });
  24.    </script>

HTML

  1. <div id="question">Question 1</div>
  2.  <div>
  3.  <img id="imgtrendy" src="files/z1.png" name="taste" value="trendy[1]" height="5%" width="5%" />
  4.  <img id="imgclassic" src="files/z2.png" name="taste1" value="classic[1]" height="5%" width="5%"/>
  5.   </div>
  6.   <div>
  7.   <img id="trendyButton" alt"Select" src="files/Select.jpg">   
  8.    <img id="classicButton" alt"Select" src="files/Select.jpg">
  9.    </div>
  10.     <div id="picval"></div>
Sample Arrays  
  1.   var NumberOfImages = 7 - 1; //-1 because array members starts from 0
  2.      var trendy = new Array(NumberOfImages);
  3.      trendy[0] = "files/z1.png";
  4.      trendy[1] = "files/z1.png";
  5.      trendy[2] = "files/z14.png";
  6.      trendy[3] = "files/z4.png";
  7.      var imgNumber = 1; //array key of current image
  8.      var NumberOfImages = 7 - 1; //-1 because array members starts from 0
  9. var classic = new Array(NumberOfImages);
  10.      classic[0] = "files/z2.png";
  11.      classic[1] = "files/z2.png";
  12.      classic[2] = "files/z12.png";
  13.      classic[3] = "files/z3.png";
  14.      var classicNumber = 1; //array key of current image
  15.      var text = 6 - 1; //-1 because array members starts from 0
  16.      var text = new Array;
  17.      text[0] = "Question 1"
  18.      text[1] = "Question 2"
  19.      text[2] = "Question 3"
  20.      text[3] = "Question 4"
  21.      var textNumber = 1; //array key of current image 

Previous method I used in javascript
  1. function manipulateDOM() {
  2.          changeObjects();
  3.          NextImage();
  4.      }
  5.      function changeObjects() {
  6.          document.getElementById("question").innerHTML = text[textNumber];
  7.      }
  8.      function NextImage() {
  9.          if (imgNumber < NumberOfImages) //Stop moving forward when we are out of images
  10.          {
  11.              trendy[0] = trendy[1]; trendy[1] = trendy[2]; trendy[2] = trendy[3];
  12.              document.images["taste"].src = trendy[imgNumber];
  13.              classic[0] = classic[1]; classic[1] = classic[2]; classic[2] = classic[3];
  14.              document.images["taste1"].src = classic[imgNumber];
  15.              text[0] = text[1]; text[1] = text[2]; text[2] = text[3];
  16.              document.getElementById["question"].innerHTML = text[textNumber];
  17.          }
  18.      }