I have 8 images on my page, 4 in one column and 4 in the other.

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.

When I click on any of the images in the other column (panel2) the image fades out slightly but no circle is shown.

```
<div class="row col-xs-12 margin0">
    <div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft">
        <div class="boxTop"></div>
        <div class="box" id="panel1">
                <div class="row col-xs-12 margin0" style="margin-left:-8%">
                        <div class="col-md-6 col-xs-6">
                            <img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145153/black_cherries_snbvu8.png" data-id="1" alt="" data-name="blackcherry" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/coconut_psdlax.png" data-id="2" alt="" data-name="coconut" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
                <div class="row col-xs-12 margin0" style="margin-left:-8%">
                        <div class="col-md-6 col-xs-6">
                            <img src="//res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/mango_p3tjp5.png" data-id="3" alt="" data-name="mango" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/strawberries_s1da7u.png" data-id="4" alt="" data-name="strawberries" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
        </div>
        <div class="boxBtm"></div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-1 productmargintop5 paddingRound productsLeft" style="top:40%; left: 4%; position:relative"> + </div>
    <div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft">
        <div class="boxTop"></div>
        <div class="box" id="panel2">
                <div class="row col-xs-12 margin0" style="margin-left:-6%">
                        <div class="col-md-6 col-xs-6">
                            <img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/chocolate_lxphco.png" data-id="1" alt="" data-name="chocolate" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/cinnamon_o8nbos.png" data-id="2" alt="" data-name="cinnamon" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
                <div class="row col-xs-12 margin0" style="margin-left:-6%">
                        <div class="col-md-6 col-xs-6">
                            <img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/honey_lawjsz.png" data-id="3" alt="" data-name="honey" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/vanilla_qptl2d.png" data-id="4" alt="" data-name="vanilla" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
        </div>
        <div class="boxBtm"></div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-1 productmargintop5 paddingRound productsLeft" style="top:40%; left: 4%; position:relative"> = </div>
    <div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft">
        <div class="boxTop"></div>
        <div class="box">
        </div>
        <div class="boxBtm"></div>
    </div>
</div>

```

and my Script

```
  $(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);
        });
    });

```

I have created a [JSFiddle here](http://jsfiddle.net/Atkinson1988/5gdndpf9/) because I'm not 100% sure what is going wrong, the images that wont display the circle are inside panel2