title: remove object from array when user clicks add button
body: <p>I am trying to store a users selected items into an array of objects that looks like
  {&quot;exercise&quot;: &quot;2 Handed Kettlebell Swing&quot;,&quot;id&quot;: 0}
  when the user clicks the remove button, it removes the 'li' from the DOM, but it also needs to remove that item from the array(exerciseDataArr), because once the user hits the &quot;Create&quot; button, It should push the array into the object(jsonData), and send as a POST request.</p>
  <p>each li has a custom data-id value in order to keep track of the order each exercise is added in, that way incase for example, a user wants to the add the same exercise in at the beginning of a workout routine, then add it at the end of a routine, the remove button will know which one to remove from the array.
  When the user clicks remove, it grabs the data-id value, matches it up to the key(id: integer) and removes that from the array.
  currently when the user clicks remove...it will only remove the object with id: 0.. However clicking on any of the other items in the list does not affect the array (exerciseDataArr) for some reason
  Included my html file, this is a Python Flask app and im using Jinja templates, as well as Wtforms to generate the form as I have a dynamic select field that uses my database to pull exercise names from that database for the user to pick from to build a routine.</p>
  <p><strong>createRoutine.html</strong></p>
  <pre><code>{% extends 'profileSignedInBase.html' %}
  
  {% block content %}
  &lt;div&gt;
    &lt;div id=&quot;media&quot;&gt;
      &lt;div&gt;
        &lt;form action=&quot;/workoutroutines&quot;&gt;
          {{form.hidden_tag()}}
  
  
          {% for field in form if field.widget.input_type != 'hidden' %}
  
          {{ field(placeholder=field.label.text) }}
          {% endfor %}
  
  
          &lt;button id=&quot;createBtn&quot;&gt;CREATE&lt;/button&gt;
        &lt;/form&gt;
  
        &lt;div&gt;
  
          &lt;button id=&quot;addBtn&quot;&gt;Add Exercise To List&lt;/button&gt;
        &lt;/div&gt;
  
  
        &lt;h1&gt;This is what you have planned for your routine&lt;/h1&gt;
        &lt;ol id=&quot;routineWishlist&quot;&gt;
  
        &lt;/ol&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src=&quot;/static/addExercise.js&quot;&gt;&lt;/script&gt;
    {% endblock %}
  </code></pre>
  <p><strong>addExercise.JS</strong></p>
  <pre><code>let jsonData = {}
  let exerciseDataArr = []
  let i = 0;
  
  // generate list of items the user has selected for their workout
      document.querySelector(&quot;#media&quot;).addEventListener(&quot;click&quot;, function (e) {
  
  //Add Item to 
    if (e.target.id == &quot;addBtn&quot;) {
      e.preventDefault();
      var exerciseValue = $('#exerciseChoices').find(&quot;:selected&quot;).text();
      var workoutName = $('#workoutName').val();
      var workoutDescription = $('#description').val();
  
      if (workoutName == &quot;&quot;) {
        console.log(&quot;please fill out all data&quot;)
        alert(&quot;please add a name&quot;)
        return;
      }
      if (workoutDescription == &quot;&quot;) {
        console.log(&quot;please fill out all data&quot;)
        alert(&quot;please add a description&quot;)
        return;
      }
      console.log(&quot;You clicked on the Add button&quot;)
      var li = document.createElement(&quot;li&quot;);
      var div = document.createElement(&quot;div&quot;)
      var remove = document.createElement(&quot;button&quot;);
      li.setAttribute(&quot;data-id&quot;, i)
      div.setAttribute(&quot;id&quot;, `exercise${i}`)
      remove.setAttribute(&quot;id&quot;, &quot;removeBtn&quot;);
  
      remove.innerText = 'Remove';
  
  
      try {
        jsonData['name'] = workoutName;
        jsonData['description'] = workoutDescription;
        exerciseDataArr.push({ 'exercise': exerciseValue,
       id: i})
      } catch (error) {
        console.error(error)
      }
  
  
      i++;
      console.log(jsonData)      //{&quot;name&quot;: &quot;workout 1&quot;,&quot;description&quot;: &quot;My favorites&quot;}
      console.log(exerciseDataArr) //After adding 2 exercises to the list {&quot;exercise&quot;: &quot;2 Handed Kettlebell Swing&quot;,&quot;id&quot;: 0}{&quot;exercise&quot;: &quot;Arnold Shoulder Press&quot;,&quot;id&quot;: 1}
  
  
      var t = document.createTextNode(exerciseValue);
      div.append(li)
      li.append(remove);
      li.appendChild(t);
      document.querySelector(&quot;#routineWishlist&quot;).appendChild(div);
  
    }
    if (e.target.id === &quot;removeBtn&quot;) {
      e.preventDefault();
  
  
      
      exerciseName = $(e.target).closest('div').attr('id');
      exerciseOrder = parseInt($(e.target).closest('li').attr('data-id'));
      console.log(&quot;remove &quot; + typeof(exerciseOrder) + &quot; &quot; + exerciseOrder + &quot; at &quot; + exerciseName )
      console.log(&quot;inside &quot; + typeof(exerciseDataArr)) //object
      //remove from displayed list of exercises
      $(e.target).closest('div').remove()
  
      // remove from object
      for(let val in exerciseDataArr){
        val = parseInt(val)
        console.log(`id: ${val}`)
        // if the exerciseDataArr contains id: exerciseOrder delete from exerciseDataArr
        if(exerciseDataArr.hasOwnProperty(&quot;id&quot;) == exerciseOrder   ){// &lt;---does not activate unless the first 'li' is clicked. 
          console.log(&quot;the object has been found, now delete it&quot;)
          delete exerciseDataArr[exerciseOrder]
          val = undefined;
        }
      }
      console.log(exerciseDataArr)
  
    }
  </code></pre>