remove object from array when user clicks button

I am trying to store a users selected items into an object so that when the user clicks a "remove button" it will also remove that item from my object. I seem to be running into an error where only the first object in my array will be removed and nothing else. Could I have some assistance?

each li has a data-id value of i, where i is an integer that increments once for every item the user adds to their list for example: user clicks add

data-id:1

user clicks add

data-id:2

etc etc, 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 exerciseDataArr

EDIT: 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.

createRoutine.html

{% extends 'profileSignedInBase.html' %}

{% block content %}
<div>
  <div id="media">
    <div>
      <form action="/workoutroutines">
        {{form.hidden_tag()}}


        {% for field in form if field.widget.input_type != 'hidden' %}

        {{ field(placeholder=field.label.text) }}
        {% endfor %}


        <button id="createBtn">CREATE</button>
      </form>

      <div>

        <button id="addBtn">Add Exercise To List</button>
      </div>


      <h1>This is what you have planned for your routine</h1>
      <ol id="routineWishlist">

      </ol>
    </div>
  </div>
  <script src="/static/addExercise.js"></script>
  {% endblock %}

addExercise.JS

let jsonData = {}
let exerciseDataArr = []
let i = 0;

// generate list of items the user has selected for their workout
    document.querySelector("#media").addEventListener("click", function (e) {

//Add Item to 
  if (e.target.id == "addBtn") {
    e.preventDefault();
    var exerciseValue = $('#exerciseChoices').find(":selected").text();
    var workoutName = $('#workoutName').val();
    var workoutDescription = $('#description').val();

    if (workoutName == "") {
      console.log("please fill out all data")
      alert("please add a name")
      return;
    }
    if (workoutDescription == "") {
      console.log("please fill out all data")
      alert("please add a description")
      return;
    }
    console.log("You clicked on the Add button")
    var li = document.createElement("li");
    var div = document.createElement("div")
    var remove = document.createElement("button");
    li.setAttribute("data-id", i)
    div.setAttribute("id", `exercise${i}`)
    remove.setAttribute("id", "removeBtn");

    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)      //{"name": "workout 1","description": "My favorites"}
    console.log(exerciseDataArr) //After adding 2 exercises to the list {"exercise": "2 Handed Kettlebell Swing","id": 0}{"exercise": "2 Handed Kettlebell Swing","id": 1}


    var t = document.createTextNode(exerciseValue);
    div.append(li)
    li.append(remove);
    li.appendChild(t);
    document.querySelector("#routineWishlist").appendChild(div);

  }
  if (e.target.id === "removeBtn") {
    e.preventDefault();


    
    exerciseName = $(e.target).closest('div').attr('id');
    exerciseOrder = parseInt($(e.target).closest('li').attr('data-id'));
    console.log("remove " + typeof(exerciseOrder) + " " + exerciseOrder + " at " + exerciseName )
    console.log("inside " + 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("id") == exerciseOrder   ){// <---does not activate unless the first 'li' is clicked. 
        console.log("the object has been found, now delete it")
        delete exerciseDataArr[exerciseOrder]
        val = undefined;
      }
    }
    console.log(exerciseDataArr)

  }