How to get the appropriate (usercontrol) div id when button client click?

I created a user control with flipping functionality mouse over(front & back). ChartPin Button will be used to stop the flipping card and back will be displayed by using JavaScript.

My question whenever I click ChartPin (first user control) always second user control is flipping is stopped not the first one. Why? Also i saw that view frame source, it seems usercontrolid_divid is added correctly.

FrameSource: (Similarly second control HtmlChartWithFlipper2_Card1 ... )
function ChartPin(ctrl) {
var content = document.getElementById("HtmlChartWithFlipper1_Card1");
var CardFront = document.getElementById("HtmlChartWithFlipper1_Card1Front");
var CardBack = document.getElementById("HtmlChartWithFlipper1_Card1Back");
PinUnPin(content, CardFront, CardBack, ctrl);
}

I appreciate your help. Thanks

ScreenShot:

Please find the sample code:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HtmlChartWithFlipper.ascx.cs" Inherits="TApplication.UserControl.HtmlChartWithFlipper" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<link href="../Pixel-Admin/assets/stylesheets/Flipper.css" rel="stylesheet" />

<script type="text/javascript">
    function fillsvg() {
        alert('fillsvg()');
    }

    function ChartPin(ctrl) {
        var content = document.getElementById("<%= Card1.ClientID %>");
        var CardFront = document.getElementById("<%= Card1Front.ClientID %>");
        var CardBack = document.getElementById("<%= Card1Back.ClientID %>");

        PinUnPin(content, CardFront, CardBack, ctrl);

    }

    function PinUnPin(Content, CardFront, CardBack, ctrl) {
        if (Content.className == 'flipper') {
            ctrl.title = "UnPin";
            ctrl.src = ctrl.src.replace("pin.png", "pin-outline.png");
            Content.classList.remove('flipper');
            CardFront.classList.remove('front');
            CardFront.classList.add('back');
            CardBack.classList.remove('back');
            CardBack.classList.add('front');
        }
        else {
            ctrl.title = "Pin";
            ctrl.src = ctrl.src.replace("pin-outline.png", "pin.png");
            Content.classList.add('flipper');
            CardFront.classList.remove('back');
            CardFront.classList.add('front');
            CardBack.classList.remove('front');
            CardBack.classList.add('back');
        }

    }
</script>

<div>
    <table id="HCWF_tbl" runat="server" width="100%" border="1">
        <tr>
            <td>
                <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                    <div id="Card1" class="flipper" runat="server">
                        <div id="Card1Front" class="front" runat="server">
                            <span class="name">Front
                            </span>
                        </div>
                        <div id="Card1Back" class="back" runat="server">
                            Back
                            <table id="HCWF_BackTbl" runat="server" width="100%">
                                <tr>
                                    <td>
                                        <asp:ImageButton ID="btnExport" runat="server" ImageUrl="~/Images/Login/download.png" Width="18px" Height="18px"
                                            ToolTip="Export" AlternateText="Export" OnClientClick="fillsvg()"
                                            OnClick="btnExport_Click" />
                                    </td>
                                    <td align="right">
                                        <asp:ImageButton ID="ChartPin" runat="server" ImageUrl="~/Images/Login/pin.png" Width="17px" Height="17px"
                                            ToolTip="Pin" AlternateText="Pin"
                                            OnClientClick="ChartPin(this); return false;" />
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>


            </td>
        </tr>
    </table>
</div>