title: JQuery show images with id based on click
body: <p>I'm pretty new at JQuery so my knowledge of syntax and functions may need some in depth explaining. Please be patient with me and questions.</p>
  
  <p>I'm building a color visualizer. Basically a stack of images with position:absolute and display:none.</p>
  
  <p>Here's my HTML structure:</p>
  
  <pre><code>&lt;div id="visualizer"&gt;
  &lt;div id="chairContainer"&gt;
          &lt;img src="/sites/default/files/color-visualizer/background.jpg" class="background"&gt;
          &lt;img src="/sites/default/files/color-visualizer/seatback-red.png"  id="redBack" class="seat"&gt;
          &lt;img src="/sites/default/files/color-visualizer/seatback-black.png"  id="blackBack" class="seat"&gt;
          &lt;img src="/sites/default/files/color-visualizer/seatback-blue.png"  id="blueBack" class="seat"&gt;
          &lt;img src="/sites/default/files/color-visualizer/seatback-teal.png"  id="tealBack" class="seat"&gt;
          &lt;img src="/sites/default/files/color-visualizer/seatback-white.png"  id="whiteBack" class="seat"&gt;
          &lt;img src="/sites/default/files/color-visualizer/seatback-ww.png"  id="wwBack" class="seat"&gt;
          &lt;img src="/sites/default/files/color-visualizer/frame-red.png"  id="redFrame" class="frame"&gt;
          &lt;img src="/sites/default/files/color-visualizer/frame-black.png"  id="blackFrame" class="frame"&gt;
          &lt;img src="/sites/default/files/color-visualizer/frame-blue.png"  id="blueFrame" class="frame"&gt;
          &lt;img src="/sites/default/files/color-visualizer/frame-teal.png"  id="tealFrame" class="frame"&gt;
          &lt;img src="/sites/default/files/color-visualizer/frame-white.png"  id="whiteFrame" class="frame"&gt;
          &lt;img src="/sites/default/files/color-visualizer/frame-ww.png"  id="wwFrame" class="frame"&gt;
      &lt;/div&gt;
      &lt;div class="intro"&gt;
          &lt;p&gt;Select a seat and back color&lt;/p&gt;
          &lt;div id="seatColors"&gt;
              &lt;img src="/sites/default/files/color-visualizer/red.png" class="seatColor" id ="seatRed"&gt;
              &lt;img src="/sites/default/files/color-visualizer/black.png" class="seatColor" id ="seatBlack"&gt;
              &lt;img src="/sites/default/files/color-visualizer/blue.png" class="seatColor" id ="seatBlue"&gt;
              &lt;img src="/sites/default/files/color-visualizer/teal.png" class="seatColor" id ="seatTeal"&gt;
              &lt;img src="/sites/default/files/color-visualizer/white.png" class="seatColor" id ="seatWhite"&gt;
              &lt;img src="/sites/default/files/color-visualizer/weatherwood.png" class="seatColor" id ="seatWw"&gt;
          &lt;/div&gt;
  
          &lt;p&gt;Select a frame color&lt;/p&gt;
          &lt;div id="frameColors"&gt;
              &lt;img src="/sites/default/files/color-visualizer/red.png" class="frameColor" id ="frameRed"&gt;
               &lt;img src="/sites/default/files/color-visualizer/black.png" class="frameColor" id ="frameBlack"&gt;
              &lt;img src="/sites/default/files/color-visualizer/blue.png" class="frameColor" id ="frameBlue"&gt;
              &lt;img src="/sites/default/files/color-visualizer/teal.png" class="frameColor" id ="frameTeal"&gt;
              &lt;img src="/sites/default/files/color-visualizer/white.png" class="frameColor" id ="frameWhite"&gt;
              &lt;img src="/sites/default/files/color-visualizer/weatherwood.png" class="frameColor" id ="frameWw"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the JQuery that works, but doesn't do what I want it to do in the sense that I want to be able to use the class of the image in the bottom divs <code>#seatColors</code> and <code>#frameColors</code> for the click function and then to show the images in the <code>chairContainer</code> based on the id. </p>
  
  <p>Jquery</p>
  
  <pre><code>    $('#seatRed').click(function(){
          $('.seat').hide();
          $('#redBack').show().addClass('color-overlay');
      })
      $('#seatBlack').click(function(){
          $('.seat').hide();
          $('#blackBack').show().addClass('color-overlay');
      })
      $('#seatBlue').click(function(){
          $('.seat').hide();
          $('#blueBack').show().addClass('color-overlay');
      })
      $('#seatTeal').click(function(){
          $('.seat').hide();
          $('#tealBack').show().addClass('color-overlay');
      })
      $('#seatWhite').click(function(){
          $('.seat').hide();
          $('#whiteBack').show().addClass('color-overlay');
      })
      $('#seatWw').click(function(){
          $('.seat').hide();
          $('#wwBack').show().addClass('color-overlay');
      })
  
  
  
      $('#frameRed').click(function(){
          $('.frame').hide();
          $('#redFrame').show().addClass('color-overlay');
      })
      $('#frameBlack').click(function(){
          $('.frame').hide();
          $('#blackFrame').show().addClass('color-overlay');
      })
      $('#frameBlue').click(function(){
          $('.frame').hide();
          $('#blueFrame').show().addClass('color-overlay');
      })
      $('#frameTeal').click(function(){
          $('.frame').hide();
          $('#tealFrame').show().addClass('color-overlay');
      })
      $('#frameWhite').click(function(){
          $('.frame').hide();
          $('#whiteFrame').show().addClass('color-overlay');
      })
      $('#frameWw').click(function(){
          $('.frame').hide();
          $('#wwFrame').show().addClass('color-overlay');
      })
  </code></pre>
  
  <p>The reason the above is not the most satisfactory is because the company we are building this for may want to add colors. It's one thing to add images, but having to edit Jquery every time seems unnecessary. Any help is appreciated. As I said, if it's a complex function, I may need some help understanding it. Thanks!</p>