title: how to find the previous clicked class / element - jquery
body: <p>I have something like a simple color picker.
  There is a <code>select</code> element to choose 1-3 colors wanted.
  after choosing, there will be 1-3 <code>div</code> depending on the value selected.
  now those <code>div</code> has class like <code>color1</code>, <code>color2</code>, <code>color3</code>
  Either one clicked, there's another div, <code>pickcolor</code> toggled having 8 colors to be chosen.</p>
  
  <p>So right now let's say I click on the <code>color1</code> div the <code>pickcolor</code> div will pop up and after chosen one of those 8 colors in the <code>pickcolor</code> it'll pass the color back to <code>color1</code> to show the users.</p>
  
  <p>I can get one done but that's only done by giving static class but when there are two colors or three.  I can't seem to figure out how to use jquery to figure out how to get back to the previous clicked class /element</p>
  
  <p>I have something like this in my html for the select section</p>
  
  <pre><code>&lt;select name="number-of-colors" class="number-of-colors"&gt;
      &lt;option value="" group="1"&gt;Select A Number&lt;/option&gt;
      &lt;option value="1" group="1"&gt;1&lt;/option&gt;
      &lt;option value="2" group="1"&gt;2&lt;/option&gt;
      &lt;option value="3" group="1"&gt;3&lt;/option&gt;
  &lt;/select&gt;
  &lt;div class="number-of-color-field"&gt;
      &lt;div name="color1" class="color1" id="color1"&gt;&lt;/div&gt;
      &lt;div name="color2" class="color2"&gt;&lt;/div&gt;
      &lt;div name="color3" class="color3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in my jquery I have something like this</p>
  
  <pre><code>  $('.number-of-colors').on('change', function(){
      var $clicked = $(this);
      var $closestDiv = $clicked.closest("div");
  
      var chooseColorValue = $clicked.val();
  
      if(chooseColorValue == 1){
          $closestDiv.find('div.color1').show().css({"width": "inherit", "height": "100%", "background-color": "pink", "border": "1px solid lightgrey", "border-radius": "5px"});
          $closestDiv.find('div.color2').hide();
          $closestDiv.find('div.color3').hide();
  
      }else if(chooseColorValue == 2){
          $closestDiv.find('div.color1').show().css({"width": "inherit", "height": "50%", "background-color": "pink", "border": "1px solid lightgrey", "border-radius": "5px"});
          $closestDiv.find('div.color2').show().css({"width": "inherit", "height": "50%", "background-color": "pink", "border": "1px solid lightgrey", "border-radius": "5px"});
          $closestDiv.find('div.color3').hide();
  
          $closestDiv.find('div.color1').on('click', function(){
              $('.colorSelectBox').css({"left": "100px","top": "570px"}).toggle();
              $('div.black')
                  .add('div.pink')
                  .add('div.yellow')
                  .on('click', function(){
                      var attrValue = $(this).attr('value');
                      $closestDiv.find('div.color1').css({"background-color": attrValue});
                  });
          });
  
          $closestDiv.find('div.color2').on('click', function(){
              $('.colorSelectBox').css({"left": "100px","top": "570px"}).toggle();
              $('div.black')
                  .add('div.pink')
                  .add('div.yellow')
                  .on('click', function(){
                      var attrValue = $(this).attr('value');
                      $closestDiv.find('div.color2').css({"background-color": attrValue});
                  });
          });
  
  
  
  
      }else if(chooseColorValue == 3){
          $closestDiv.find('div.color1').show().css({"width": "inherit", "height": "33%", "background-color": "pink", "border": "1px solid lightgrey", "border-radius": "5px"});
          $closestDiv.find('div.color2').show().css({"width": "inherit", "height": "33%", "background-color": "pink", "border": "1px solid lightgrey", "border-radius": "5px"});
          $closestDiv.find('div.color3').show().css({"width": "inherit", "height": "33%", "background-color": "pink", "border": "1px solid lightgrey", "border-radius": "5px"});
      }else{
          $closestDiv.find('div.color1').hide();
          $closestDiv.find('div.color2').hide();
          $closestDiv.find('div.color3').hide();
      }
  });
  </code></pre>
  
  <p>as shown, this will only work for color1 if I duplicate this and use <code>div.color2</code> it wouldn't work because it doesn't know where to go.</p>
  
  <p>my color picker div</p>
  
  <pre><code>            &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;div class="colorSelectBox"&gt;
                  &lt;div&gt;Transparent&lt;/div&gt;
                  &lt;div&gt;
                      &lt;div class="pink" value="pink"&gt;&lt;/div&gt;
                      &lt;div class="black" value="black"&gt;&lt;/div&gt;
                      &lt;div class="yellow" value="yellow"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
                  &lt;div&gt;solid&lt;/div&gt;
                  &lt;div&gt;
                      &lt;div class="red"&gt;&lt;/div&gt;
                      &lt;div class="blue"&gt;&lt;/div&gt;
                      &lt;div class="grey"&gt;&lt;/div&gt;
                      &lt;div class="green"&gt;&lt;/div&gt;
                      &lt;div class="white"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance everyone.</p>