title: When clicking show image
body: <p>Below is a jsfiddle file for reference.</p>
  
  <p>Im trying to make it so that when you press a button (1,2,3,4) the image that relates shows on click and overlaps with images as you click more numbers. I tried ----</p>
  
  <pre><code>$('#showButton').click(function() {
      $('#img3').show();
      return false;
  });
  </code></pre>
  
  <p>But it isn't working. </p>
  
  <p>Is there a way to say when clicking this button show #img1 
  and when clicking another button #img2 overlaps that image </p>
  
  <p>Thank you so much!</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;h1&gt;Question here&lt;/h1&gt;
  &lt;button onclick="picture()"&gt;1&lt;/button&gt;
  &lt;button onclick="picture()"&gt;2&lt;/button&gt;
  &lt;button onclick="picture()"&gt;3&lt;/button&gt;
  &lt;button onclick="picture()"&gt;4&lt;/button&gt;
  &lt;button onclick="picture()"&gt;5&lt;/button&gt;
  &lt;/br&gt;
  &lt;/br&gt;
  &lt;/br&gt;
  &lt;h1&gt;Question here&lt;/h1&gt;
  &lt;button onclick="picture()"&gt;1&lt;/button&gt;
  &lt;button onclick="picture()"&gt;2&lt;/button&gt;
  &lt;button onclick="picture()"&gt;3&lt;/button&gt;
  &lt;button onclick="picture()"&gt;4&lt;/button&gt;
  &lt;button onclick="picture()"&gt;5&lt;/button&gt;
  &lt;/br&gt;
  &lt;/br&gt;
  &lt;/br&gt;
  &lt;!-- ////images --&gt;
  &lt;img src="line-01.png" id='img1'&gt;
  &lt;img src="line-02.png" id='img2'&gt;
  &lt;img src="line-03.png" id='img3'&gt;
  &lt;img src="line-04.png" id='img4'&gt;
  &lt;img src="line-05.png" id='img5'&gt;
  &lt;img src="line-06.png" id='img6'&gt;
  &lt;img src="line-07.png" id='img7'&gt;
  &lt;img src="line-08.png" id='img8'&gt;
  &lt;img src="line-09.png" id='img9'&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>img {/*    display:none;*/
  position:absolute;
  width:200px;}
  </code></pre>