title: clicking on hyperlink need to display a edit form in html
body: <p>i am displaying the data in table format when i click on id need to display the edit form on the same page without refreshing but when i click on user id it is displaying the form but when i click on second id it is closing the form.</p>
  
  <p>If i click on first it should open the form and if i click on same id then only it should close if not it should be displayed.</p>
  
  <p>If i click on second id then the edit form related to that id it should be displayed.</p>
  
  <p>Here is the code</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table  class="table table-striped" &gt;
     &lt;thead&gt;
         &lt;tr&gt;
             &lt;th&gt;User Ids&lt;/th&gt;
             &lt;th&gt;Name&lt;/th&gt;
             &lt;th&gt;Email&lt;/th&gt;
             &lt;th&gt;Phone&lt;/th&gt;
             &lt;th&gt;User Role&lt;/th&gt;
             &lt;th&gt;Status&lt;/th&gt;
         &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
         &lt;tr&gt;
             &lt;td&gt;&lt;a href="#" onclick="toggler('myContent');"&gt;746&lt;/a&gt;&lt;/td&gt;
             &lt;td&gt;Admin&lt;/td&gt;
             &lt;td&gt;admin@gmail.com&lt;/td&gt;
             &lt;td&gt;9989099890&lt;/td&gt;
             &lt;td&gt;Admin&lt;/td&gt;
             &lt;td&gt;&lt;i class="fa fa-check" title="Approved"&gt;&lt;/i&gt;&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
             &lt;td&gt;&lt;a href="#" onclick="toggler('myContent');"&gt;747&lt;/a&gt;&lt;/td&gt;
             &lt;td&gt;Doctor&lt;/td&gt;
             &lt;td&gt;doctor@gmail.com&lt;/td&gt;
             &lt;td&gt;9999999999&lt;/td&gt;
             &lt;td&gt;Doctor&lt;/td&gt;
             &lt;td&gt;&lt;i class="fa fa-check" title="Approved"&gt;&lt;/i&gt;&lt;/td&gt;
         &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;div id="myContent" class='hiddens'&gt;
     &lt;form action="#"&gt;
         &lt;div class=""&gt;
             &lt;div class="col-md-6"&gt;
                 &lt;label data-error="wrong" data-success="right" for="first-name"&gt;First Name:&lt;/label&gt;
                 &lt;input type="text" id="first-name" class="form-control validate"&gt;
             &lt;/div&gt;
             &lt;div class="col-md-6"&gt;
                 &lt;label data-error="wrong" data-success="right" for="last-name"&gt;Last Name:&lt;/label&gt;
                 &lt;input type="text" id="last-name" class="form-control validate"&gt;
             &lt;/div&gt;
             &lt;div class="col-md-6"&gt;
                 &lt;label data-error="wrong" data-success="right" for="email"&gt;Email:&lt;/label&gt;
                 &lt;input type="email" id="email" class="form-control validate"&gt;
             &lt;/div&gt;
             &lt;div class="col-md-6"&gt;
                 &lt;label data-error="wrong" data-success="right" for="phone-number"&gt;Phone Number:&lt;/label&gt;
                 &lt;input type="text" id="phone-number" class="form-control validate"&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function toggler(divId) {
      $("#" + divId).toggle();
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.hiddens {
      display:none;
  }
  </code></pre>