单击图像时不会出现圆圈，但对其他人有效

我的页面上有8个图像，其中4个在一列，4个在另一列。

当我点击第一列（面板1）中的任何图像时，我可以看到图像顶部出现一个圆圈，显示其已被选中。

当我点击另一列（面板2）中的任何图像时，图像会稍微淡出，但不会显示圆圈。

<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>

和我的脚本

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

我在这里创建了一个JSFiddle，因为我不能100%确定出了什么问题，不会显示圆圈的图像在panel2 内