title: Get HTML component from which button was pressed
body: <p>How do I get the HTML component that contains the button which has been clicked with jQuery? After a button is clicked I need to get the <strong>invite</strong> object that corresponds to the clicked button and send a post request to a given link.</p>
  
  <pre><code>{% if invites %}
      {% for invite in invites %}
          &lt;p&gt;Your invites:&lt;/p&gt;
          &lt;div class="row"&gt;
              &lt;label style="display: block"&gt;Invite from {{ invite.initiator }} to join his conference!&lt;/label&gt;
              &lt;button type="button" id="ButtonId"&gt;Accept invite&lt;/button&gt;
          &lt;/div&gt;
      {% endfor %}
  {% endif %}
  </code></pre>
  
  <p>The script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function() {
  
          $('#ButtonId').on('click',function(){
              !$(this).hasClass('ButtonClicked') ? addClass('ButtonClicked') : '';
              $('#ButtonId').val('Done');
              var data = {
  
              };
  
              $.ajax({
                  url: '/api/send_invite/' + /*the username*/,
                  data: JSON.stringify(data , null, '\t'),
                  contentType: 'application/json;charset=UTF-8',
                  type: 'POST',
                  success: function() {
                  }
              });
          });
  
      });
  &lt;/script&gt;
  </code></pre>