title: How can I create a star based feedback system for a website?
body: <p>I'm creating a website for fun, one of the pages is a feedback page. On here I have many containers, inside each other and with different things in them. I wanted to  create a star-based feedback rating, I have two images, one is an empty star and the other is a filled star. On first look the star is empty and I want it to change to the filled star, which I have done! Now, when trying to change multiple images, I can't seem to find a way to do it. For example, is someone is leaving a four star rating, I want the all the stars to the left and including the clicked star to change to the other image.</p>
  
  <p>Here is my HTML for the images:</p>
  
  <pre><code>&lt;img src="star.png" width="20px" height="20px" id="1" onclick="change();"&gt;
  &lt;img src="star.png" width="20px" height="20px" id="2" onclick="change();"&gt;
  &lt;img src="star.png" width="20px" height="20px" id="3" onclick="change();"&gt;
  &lt;img src="star.png" width="20px" height="20px" id="4" onclick="change();"&gt;
  &lt;img src="star.png" width="20px" height="20px" id="5" onclick="change();"&gt;
  </code></pre>
  
  <p>And here is my JavaScript to change one image only:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function change()
  {
      var image1 = document.getElementById('1');
      image1.src = "filledStar.png";
  }
  </code></pre>
  
  <p></p>
  
  <p>So if I click on the fifth image I want all of the images to change, and if I click on the fourth most right image I want that image and all of the images to the left to change etc etc.</p>