title: reset index value to zero onclick
body: <p>It's really in the question, but, how can I reset the value of the index to zero onclick?</p>
  
  <p>I have a list of videos, where any of them can be played by clicking on them. Once the video has completed, it will play the next video.</p>
  
  <p>It works, but if you click one and then another, instead of playing the next video onend, it will play the video two after the one that just played. If you click a third time, the third one will be played. I understand that it's because the function is called on <code>ended</code> and that each time you click a new video to play, the previous one ends, and adds to its value.</p>
  
  <p>How do I make it stop doing this?</p>
  
  <p>The function for playing the next video is:</p>
  
  <pre><code>$("#myVid").bind("ended", function() {
              $("#bigPic").removeClass("move");
              $("#MyT").fadeIn(250);
              function playArray(ele, array) {
                  index++;
                  if (index &gt;= array.length) {
                      index = i;
                  }
                  ele.src = array[index];
                  ele.load();
                  ele.play();
              }
              playArray(document.getElementById("myVid"), videos);
          });
  </code></pre>
  
  <p>p.s. I've tried to reduce the value by adding <code>index--</code> onclick, but that just looped the video.</p>