title: Circle not appearing when image is clicked, but works for others
body: <p>I have 8 images on my page, 4 in one column and 4 in the other.</p>
  
  <p>When I click on any of the images in the first column (panel1) I can see a circle appear on top of the image to show its been selected.</p>
  
  <p>When I click on any of the images in the other column (panel2) the image fades out slightly but no circle is shown.</p>
  
  <pre><code>&lt;div class="row col-xs-12 margin0"&gt;
      &lt;div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft"&gt;
          &lt;div class="boxTop"&gt;&lt;/div&gt;
          &lt;div class="box" id="panel1"&gt;
                  &lt;div class="row col-xs-12 margin0" style="margin-left:-8%"&gt;
                          &lt;div class="col-md-6 col-xs-6"&gt;
                              &lt;img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145153/black_cherries_snbvu8.png" data-id="1" alt="" data-name="blackcherry" /&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-6 col-xs-6"&gt;
                              &lt;img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/coconut_psdlax.png" data-id="2" alt="" data-name="coconut" /&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="clearfix"&gt;&lt;/div&gt;
                  &lt;div class="marginBottom10 visible-xs-block"&gt;&lt;/div&gt;
                  &lt;div class="row col-xs-12 margin0" style="margin-left:-8%"&gt;
                          &lt;div class="col-md-6 col-xs-6"&gt;
                              &lt;img src="//res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/mango_p3tjp5.png" data-id="3" alt="" data-name="mango" /&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-6 col-xs-6"&gt;
                              &lt;img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/strawberries_s1da7u.png" data-id="4" alt="" data-name="strawberries" /&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="clearfix"&gt;&lt;/div&gt;
                  &lt;div class="marginBottom10 visible-xs-block"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="boxBtm"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-12 col-sm-6 col-md-1 productmargintop5 paddingRound productsLeft" style="top:40%; left: 4%; position:relative"&gt; + &lt;/div&gt;
      &lt;div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft"&gt;
          &lt;div class="boxTop"&gt;&lt;/div&gt;
          &lt;div class="box" id="panel2"&gt;
                  &lt;div class="row col-xs-12 margin0" style="margin-left:-6%"&gt;
                          &lt;div class="col-md-6 col-xs-6"&gt;
                              &lt;img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/chocolate_lxphco.png" data-id="1" alt="" data-name="chocolate" /&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-6 col-xs-6"&gt;
                              &lt;img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/cinnamon_o8nbos.png" data-id="2" alt="" data-name="cinnamon" /&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="clearfix"&gt;&lt;/div&gt;
                  &lt;div class="marginBottom10 visible-xs-block"&gt;&lt;/div&gt;
                  &lt;div class="row col-xs-12 margin0" style="margin-left:-6%"&gt;
                          &lt;div class="col-md-6 col-xs-6"&gt;
                              &lt;img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/honey_lawjsz.png" data-id="3" alt="" data-name="honey" /&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-6 col-xs-6"&gt;
                              &lt;img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/vanilla_qptl2d.png" data-id="4" alt="" data-name="vanilla" /&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="clearfix"&gt;&lt;/div&gt;
                  &lt;div class="marginBottom10 visible-xs-block"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="boxBtm"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-12 col-sm-6 col-md-1 productmargintop5 paddingRound productsLeft" style="top:40%; left: 4%; position:relative"&gt; = &lt;/div&gt;
      &lt;div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft"&gt;
          &lt;div class="boxTop"&gt;&lt;/div&gt;
          &lt;div class="box"&gt;
          &lt;/div&gt;
          &lt;div class="boxBtm"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my Script</p>
  
  <pre><code>  $(document).ready(function () {
  
           // Panel1 is working as expected      
           $("#panel1 .row img").click(function () { 
              $("#panel1 .row img").removeClass("BlackcherryCircle");
              $("#panel1 .row img").removeClass("CoconutCirle");
              $("#panel1 .row img").removeClass("MangoCircle");
              $("#panel1 .row img").removeClass("StrawberryCircle");
              $("#hdnPanel1").val('');
  
              var name = $(this).attr("data-name");
  
              var id = $(this).attr("data-id");
  
              switch (name) {
                  case "blackcherry":
                      $(this).addClass('BlackcherryCircle');
                      break;
                  case "coconut":
                      $(this).addClass('CoconutCirle');
                      break;
                  case "mango":
                      $(this).addClass('MangoCircle');
                      break;
                  case "strawberries":
                      $(this).addClass('StrawberryCircle');
                      break;
                  default:
              }
  
              $("#hdnPanel1").val(id);
  
  
          });
  
  
          // Panel2 has the issue it will not apply the CSS Class for the image clicked
          $("#panel2 .row img").click(function () {
              $("#panel2 .row img").removeClass("ChocolateCircle");
              $("#panel2 .row img").removeClass("CinnamonCircle");
              $("#panel2 .row img").removeClass("HoneyCircle");
              $("#panel2 .row img").removeClass("VanillaCircle");
              $("#hdnPanel2").val('');
  
              var name = $(this).attr("data-name");
              var id = $(this).attr("data-id");
  
              switch (name) {
                  case "chocolate":
                      $(this).addClass('ChocolateCircle'); // Will not apply the CSS Class
                      break;
  
                  case "cinnamon":
                      $(this).addClass('CinnamonCircle'); // Will not apply the CSS Class
                      break;
  
                  case "honey":
                      $(this).addClass('HoneyCircle'); // Will not apply the CSS Class
                      break;
  
                  case "vanilla":
                      $(this).addClass('VanillaCircle'); // Will not apply the CSS Class
                      break;
  
  
                  default:
              }
  
              $("#hdnPanel2").val(id);
          });
      });
  </code></pre>
  
  <p>I have created a <a href="http://jsfiddle.net/Atkinson1988/5gdndpf9/" rel="nofollow">JSFiddle here</a> because I'm not 100% sure what is going wrong, the images that wont display the circle are inside panel2</p>