javascript - How to trigger click event when using "a" tag -

i using jquery flip plugin. https://nnattawat.github.io/flip/ toggle between 2 div elements. have 1 button use toggle between 2 div elements. able achieve it. want have same functionality when click on "a" tag.

working perfectly:

    <button type="button" id = "toggle1" class = "toggle">click me!</button>  <script> $(document).ready(function() {   $("#flip1").flip({  trigger: 'manual'   }); $('#toggle1').click(function() {   $("#flip1").flip('toggle');   });  });  </script> 

now want replace button

<a id = "toggle1"><i class="some-icon"></a> 

when click on tag nothing happens. can guide me.

edit

    <div class = "flip" id = "flip1">         <div class = "front">                                <div id = "chartanchor1" class="x_content">                              // front stuff here                                </div>                              </div>                                <div class = "back">                                  <div id = "tableanchor1" class="x_content">                               // flipped stuff here                               </div>         </div> </div> 

edit: not working when added in menu bar of div. adding code here.

<div class="col-md-6 col-sm-6 col-xs-12">    <div class="x_panel">       <div class="x_title">          <h2>income<small>sessions</small></h2>          <ul class="nav navbar-right panel_toolbox">             <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>             </li>             <li class="dropdown">                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class          ="fa fa-wrench"></i></a>                <ul class="dropdown-menu" role="menu">                   <li><a href="settings.html">settings 1</a>                   </li>                   <li><button type="button" id = "toggle1" class = "toggle">click me!</button>                   </li>                </ul>             </li>             <li>                <a id="toggle1">link</a><!-- <a id = "toggle1"><i class="fa fa-external-link user-profile-icon">nm</i></a> -->             </li>             <li><a class="close-link"><i class="fa fa-close"></i></a>             </li>          </ul>          <div class="clearfix"></div>       </div>       <div class = "flip" id = "flip1">          <div class = "front">             <div id = "chartanchor1" class="x_content">             </div>          </div>          <div class = "back">             <div id = "tableanchor1" class="x_content">             </div>          </div>       </div>    </div> </div> 

screenshot below:

you can't attach click event on 2 different elements same id, need id anchor a, toggle2

$(document).ready(function() {    $("#flip1").flip({   trigger: 'manual'    });  $('#toggle1').click(function() {    $("#flip1").flip('toggle');    });  $('#toggle2').click(function() {    $("#flip1").flip('toggle');    });      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>  <script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>          <a id = "toggle2"><i class="some-icon">click me too</i></a>    <button type="button" id = "toggle1" class = "toggle">click me!</button>    <div class = "flip" id = "flip1">    <div class = "front">      <div id = "chartanchor1" class="x_content">        // front stuff here      </div>    </div>    <div class = "back">        <div id = "tableanchor1" class="x_content">        // flipped stuff here      </div>    </div>  </div>