title: On element click with the same class show hidden element using jquery
body: <p>I have some forms with the same class <strong><code>settings-form-info</code></strong> and I need every time i click at the little <strong>edit</strong> button to display only the specific form's edit div. For example when I click the edit button next to <strong>Form 1 Info</strong> label I want to display only the Form 1 Edit form, and then when I click the cancel button at the bottom of the form to close this already open form. As it now when I click the edit button it displays all the forms. I used the jQuery <code>.each</code> function but it doesn't work.</p>
  <p>What am I doing wrong ??</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.settings-edit-icon').each(function() {
      $(this).click(function() {
          $(".settings-form-edit").removeClass('hide');
          $(".settings-form-info").addClass('hide');
   });
  });
  
  $('.btn-cancel').each(function() {
      $(this).click(function() {
          $(".settings-form-edit").addClass('hide');
          $(".settings-form-info").removeClass('hide');
   });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.form-label {
  font-weight:bold;
  margin-bottom:10px;
  
  }
  
  .form-control {
  display:inline-block;
  min-width:110px;
  }
  
  .form-row {
  margin-bottom:10px;
  }
  
  .btn {
  font-size:12px;
  display:inline;
  background: #0088cc;
  color:#fff;
  border-radius:4px;
  padding:3px;
  font-weight:bold;
  cursor:pointer;
  }
  
  .btn-group {
  margin-top:10px;
  margin-bottom:20px;
  }
  
  .text-muted {
  color:#888;
  }
  
  .hide {
  display:none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="settings-form-info"&gt;    
  
  &lt;div class="form-label"&gt;Form 1 Info &lt;div class="settings-edit-icon btn"&gt;Edit&lt;/div&gt; &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Brand: &lt;/div&gt; &lt;div class="form-control"&gt; Jeep &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Model: &lt;/div&gt; &lt;div class="form-control"&gt; Wrangler &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Color: &lt;/div&gt; &lt;div class="form-control"&gt; Red &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Year: &lt;/div&gt; &lt;div class="form-control"&gt; 2010 &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="settings-form-edit hide"&gt;    
  
  &lt;div class="form-label"&gt;Form 1 Edit &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Brand: &lt;/div&gt; &lt;input class="form-control" placeholder="Car brand"&gt; 
  &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Model: &lt;/div&gt; &lt;input class="form-control" placeholder="Car model"&gt; 
  &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Color: &lt;/div&gt; &lt;input class="form-control" placeholder="Car color"&gt; 
  &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Year &lt;/div&gt; &lt;input class="form-control" placeholder="Construction year"&gt; 
  &lt;/div&gt;
  
  &lt;div class="btn-group"&gt;
  &lt;div class="btn"&gt;Save&lt;/div&gt; &lt;div class="btn btn-cancel"&gt;Cancel&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  &lt;div class="settings-form-info"&gt;    
  
  &lt;div class="form-label"&gt;Form 2 Info &lt;div class="settings-edit-icon btn"&gt;Edit&lt;/div&gt; &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Brand: &lt;/div&gt; &lt;div class="form-control"&gt; Apple &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Model: &lt;/div&gt; &lt;div class="form-control"&gt; iPhone &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Color: &lt;/div&gt; &lt;div class="form-control"&gt; Silver &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Year: &lt;/div&gt; &lt;div class="form-control"&gt; 2022 &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="settings-form-edit hide"&gt;    
  
  &lt;div class="form-label"&gt;Form 2 Edit &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Brand: &lt;/div&gt; &lt;input class="form-control" placeholder="Phone brand"&gt; 
  &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Model: &lt;/div&gt; &lt;input class="form-control" placeholder="Phone model"&gt; 
  &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Color: &lt;/div&gt; &lt;input class="form-control" placeholder="Phone color"&gt; 
  &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="form-control text-muted"&gt;Year &lt;/div&gt; &lt;input class="form-control" placeholder="Construction year"&gt; 
  &lt;/div&gt;
  
  &lt;div class="btn-group"&gt;
  &lt;div class="btn"&gt;Save&lt;/div&gt; &lt;div class="btn btn-cancel"&gt;Cancel&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>