title: Multiple Get Requests for One Action
body: <p>I currently have a CRUD reminder app and has a context menu with options such as edit, delete, etc. Buttons on the context menu are updated based on the reminders id, and ids are passed to a <a href="https://github.com/trco/django-bootstrap-modal-forms" rel="nofollow noreferrer">bootstrap modal form</a>.</p>
  
  <pre><code>function toggleMenuOn(e) {
      if ( menuState !== 1 ) {
        menuState = 1;
        menu.classList.add( contextMenuActive );
      }
  
      let reminder_id = e.target.id
      let context_btn1 = document.getElementById("context_menu_btn1");
      let reminder_pk = reminder_id.replace("reminder", "");
      let reminder_url = "{% url 'update-reminder' 0 %}".replace(/0/, reminder_pk) 
      context_btn1.className = "update-reminder context-menu__link btn btn-light";
      context_btn1.setAttribute('data-id', reminder_url);
      $("#context_menu_btn1").modalForm({formURL: reminder_url});
    }
  </code></pre>
  
  <p>However, when I looked in the command line, I saw many GET requests for one button click:</p>
  
  <pre><code>[22/Dec/2019 17:50:01] "GET /update_reminder/8/ HTTP/1.1" 200 4650
  [22/Dec/2019 17:50:01] "GET /update_reminder/4/ HTTP/1.1" 200 4681
  [22/Dec/2019 17:50:01] "GET /update_reminder/8/ HTTP/1.1" 200 4650
  [22/Dec/2019 17:50:01] "GET /update_reminder/4/ HTTP/1.1" 200 4681
  </code></pre>
  
  <p>The interesting thing is, when the page is first loaded and I click edit on a reminder, one GET request appears. But when I click it another time, 2 GET requests appear, with alternating links, as shown above. On the third edit click 3 GET requests show up. I had a look in the network tab in inspect element and shows the same. This is a problem as it slows down the page and sometimes returns the incorrect form url. I am quite lost on how and why it is happening, as modalForm is only called once. </p>