title: Hide divs on click - multiple boxes
body: <p>I have a bit long info submission form. I have an option that someone click "add another", there is a notification box display with text like "Success!" like that with close button. Please check this image.</p>
  
  <p><a href="https://i.stack.imgur.com/JoXGm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JoXGm.png" alt="enter image description here"></a></p>
  
  <p>Therefore I have three "add another" buttons and three success alerts. When someone click close, that alert message needs to be disappear. </p>
  
  <p><strong>The problem</strong></p>
  
  <p>I used javascript for that success box. It does these things.</p>
  
  <blockquote>
    <p>Click "Add another" button, appears success box. <br> Click close button on
    success box, box disappears.</p>
  </blockquote>
  
  <p>Here is my code. </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>document.querySelector(".add-box").addEventListener("click", function() {
    document.querySelector(".add-box-wrap").style.display = "inline-block";
  });
  
  document.querySelector(".add-box1").addEventListener("click", function() {
    document.querySelector(".add-box-wrap1").style.display = "inline-block";
  });
  
  document.querySelector(".add-box2").addEventListener("click", function() {
    document.querySelector(".add-box-wrap2").style.display = "inline-block";
  });
  
  
  $(".claim-btn-close").click(function() {
    $(".add-box-wrap").hide();
  });
  
  $(".claim-btn-close1").click(function() {
    $(".add-box-wrap1").hide();
  });
  
  $(".claim-btn-close2").click(function() {
    $(".add-box-wrap2").hide();
  });
  
  &lt;!-- This goes end of html page --&gt;
  function hide(target) {
    document.getElementsByClassName(target).style.display = 'none';
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!--Success form--&gt;
  &lt;div class="add-box-wrap"&gt;
    &lt;div class="claim-btn-close" onclick="hide('.claim-btn-close')"&gt;
      &lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;a href="" class="btn btn-primary claim-btn"&gt;Success!&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!--Add another button --&gt;
  &lt;div class="col-lg-10 col-md-10 col-sm-12 no-padding"&gt;
    &lt;a class="add-box"&gt;Add another&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>See.. there is a major problem with code repeating. (I didn't repeat html codes, just post here one example) I would like to know the best practice to achieve things like this. </p>