我试图将用户选择的项目存储到一个对象数组中，该数组看起来像{“exercise”：“2手壶铃摆动”，“id”：0}当用户单击删除按钮时，它会从dom中删除“li”，但它也需要从数组中删除该项目（exercisedataarr），因为一旦用户点击“创建”按钮，它应该将数组推入对象（jsondata），并作为post请求发送。
每个li都有一个自定义数据id值，以便跟踪每个练习的添加顺序，例如，如果用户希望在训练例程开始时添加相同的练习，然后在例程结束时添加，则“删除”按钮将知道从数组中删除哪个。当用户单击remove时，它会获取数据id值，将其与键（id:integer）匹配，并将其从数组中删除。当前，当用户单击“删除…”时，它将仅删除id为0的对象。。但是，单击列表中的任何其他项目都不会影响数组（exercisedataarr），因为某些原因包括我的html文件，这是一个python flask应用程序，我使用jinja模板，以及生成表单的wtforms，因为我有一个动态选择字段，该字段使用我的数据库从该数据库中提取练习名称，供用户选择以构建例程。
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": "Arnold Shoulder Press","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)

  }