title: How to enable actions on toggle selected items
body: <p>I'm developing an Admin Panel on a website (Python + Flask) and I came across with an issue while trying to implement a <em>Select All toggle</em>.</p>
  
  <p>The table looks like the following:</p>
  
  <p><a href="https://i.stack.imgur.com/8C5Iu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8C5Iu.png" alt="enter image description here"></a></p>
  
  <p>The toggle itself has been implemented but now I want to make it useful.</p>
  
  <p>Upon clicking the 'SELECTED' button I want to be able to delete each and every selected item (flag) but I'm not exacly sure how I can pull it off.</p>
  
  <p>Each flag can be individually deleted by clicking on the <em>glyphicon-trash</em> according to the following Python/HTML:</p>
  
  <pre><code>&lt;button onclick="deleteSelected('politician')"&gt;SELECTED&lt;/button&gt;
  {% for flag in flags %}
    &lt;tr&gt;
      &lt;!-- Check box --&gt;
      &lt;td style="width: 60px;"&gt;&lt;input type="checkbox" name="politician" value="bar1"&gt;&lt;/td&gt;
      &lt;!-- First Name --&gt;
      &lt;td class="col-title"&gt;{{flag.flagtitle}}&lt;/td&gt;
      &lt;!-- Last Name --&gt;
      &lt;td class="col-description"&gt;{{flag.flagreason}}&lt;/td&gt;
      &lt;!-- Details --&gt;
      &lt;td&gt;
        &lt;a href="/flag/{{ flag.idflag }}"&gt;
          &lt;span class="glyphicon glyphicon-info-sign"&gt;&lt;/span&gt;
        &lt;/a&gt;
      &lt;/td&gt;
      &lt;!-- Edit icon --&gt;
      &lt;td class="list-buttons-column"&gt;
        &lt;a href="/politician/{{ flag.politician }}"&gt;
          &lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;
        &lt;/a&gt;
      &lt;/td&gt;
  
      &lt;!-- DELETE ITEM/FLAG --&gt;
      &lt;td class="col-delete"&gt;
        &lt;form action ="/delete_flag/{{ flag.idflag }}" method="POST"&gt;
          &lt;button onclick="return confirm('Are you sure you want to delete this flag?');"&gt;
            &lt;span class="fa fa-trash glyphicon glyphicon-trash"&gt;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/form&gt;
      &lt;/td&gt;
  
    &lt;/tr&gt;
  {% endfor %}
  </code></pre>
  
  <p>My idea was to develop a JavaScript function to delete the selected content but I'm not sure how I can get the <code>flag.idFlag</code>, which is the flags' id's associated.</p>
  
  <p>I thought it would look something like this:</p>
  
  <pre><code>function deleteSelected(elem) {
       checkboxes = document.getElementsByName(elem);
       for(var i=0, n=checkboxes.length;i&lt;n;i++) {
         if (checkboxes[i].checked) {
               delete((checkboxes[i].getSelectedFlag).idFlag)
         }
       }
  }
  </code></pre>
  
  <p>Obviously the code above doesn't work, it was just meant to give you an idea of what I'm looking for. </p>
  
  <p>Is there a way I can do this? Thanks in advance.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Ok so I figured it out. Considering I had to submit multiple forms where <code>action="/delete_flag/flag.idFlag"</code>, I added a column to the table where the flag's id would be visible. Like the following:</p>
  
  <p><a href="https://i.stack.imgur.com/8C5Iu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8C5Iu.png" alt="enter image description here"></a> </p>
  
  <p>For that matter, I created a JS function to retrieve the first value of each row (ID) and store it in an array of IDs so that I could create and submit a form for each one of them.</p>
  
  <p>For each ID of the array I create a form where <code>form.action = "/delete_flag/" + retrievedID</code>. See code below. </p>
  
  <pre><code>function deleteRecords() {
      var arrayOfIDs;
      arrayOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
              return $(this).closest('tr').find('td:nth-child(2)').text();
          }).get();   
  
          var delFlagForm = document.createElement("form");
          var action; 
          var formID;
          var submitFormStr;
  
          for (var i = 0; i &lt; arr.length; i++) {
              action = "/delete_flag/" + arr[i];
              formID = 'form' + i;
              delFlagForm.setAttribute("id", formID);
              delFlagForm.setAttribute("method", "post");
              delFlagForm.setAttribute("action", action);
  
              delFlagForm.submit(); 
          }
  }
  </code></pre>
  
  <p>This sounded good in my head until I realised multiple form submissions will only work asynchronously. <strong>So I made the following changes and this is where I'm stuck right now</strong>. The forms simply won't be submitted, nothing happens:</p>
  
  <pre><code>function deleteRecords() {
      var arraryOfIDs;
      arraryOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
              return $(this).closest('tr').find('td:nth-child(2)').text();
          }).get();   
  
          var delFlagForm = document.createElement("form");
          var action; 
          var formID;
          var submitFormStr;
  
          for (var i = 0; i &lt; arr.length; i++) {
              action = "/delete_flag/" + arr[i];
              formID = 'form' + i;
              delFlagForm.setAttribute("id", formID);
              delFlagForm.setAttribute("method", "post");
              delFlagForm.setAttribute("action", action);
  
              if (i != 0) submitFormStr += ' #' + formID;
              else submitFormStr = '#' + formID; 
          }
          $('submitFormStr').submit();
          return false;
  }
  </code></pre>
  
  <p>The variable <code>submitFormStr</code> updated within the loop stores the id for each form created like the following: <code>#form0 #form1</code>so for this reason I don't understand why the piece of code <code>$('submitFormStr').submit();</code> which is equivalent to <code>$('#form0 #form1').submit();</code> is not working.</p>
  
  <p>Is there anything I'm doing wrong?</p>