Add or Remove clicked Item from the Array list

I want to create an Array of selected/checked item and use it further.

Below is my Basic HTML and JS code (external JS).

• If item checked, that item should be added to the created Array
• If item unchecked, that item should be removed from the created Array

Note: I tried this solution too, but it’s not working like i wanted. (How can I remove a specific item from an array?)

My JS and HTML Code:

function theFunction(event) {
      event.preventDefault();  
       console.log("test");
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="dropdown-menu" id="userlist">
    <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="first-wrapper">
        <input class="form-check-input me-1" type="checkbox" value="first" id="first">
        <label  for="first">First checkbox</label>
    </li>
    <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="second-wrapper">
        <input class="form-check-input me-1" type="checkbox" value="second"  id="second">
        <label  for="second">Second checkbox</label>
    </li>
    <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="third-wrapper">
        <input class="form-check-input me-1" type="checkbox" value="third"  id="third">
        <label  for="third">Third checkbox</label>
    </li>
    <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="fourth-wrapper">
        <input class="form-check-input me-1" type="checkbox" value="fourth"  id="fourth">
        <label  for="fourth">Fourth checkbox</label>
    </li>
    <li class="list-group-item border-0 py-2" onclick="theFunction(event)" id="fifth-wrapper">
        <input class="form-check-input me-1" type="checkbox" value="fifth"  id="fifth">
        <label  for="fifth">Fifth checkbox</label>
    </li>
</ul>

Answer

Just push the element to array, if the element doesnot exist in array.

If the element already exist, remove it from array using Array.splice

I have moved the click even from the li to the input.

Also I have used flex display for the elements, so that the label can use the remaining space in the li

const created = [];
function theFunction(event) {
  const index = created.indexOf(event.target.value);
  index === -1 ? created.push(event.target.value) : created.splice(index, 1);
  console.log(created);
}

li {
  display: flex;
}

label {
  flex: 1;
}

<ul class="dropdown-menu" id="userlist">
  <li class="list-group-item border-0 py-2" id="first-wrapper">
    <input class="form-check-input me-1" type="checkbox" value="first" id="first" onclick="theFunction(event)">
    <label for="first">First checkbox</label>
  </li>
  <li class="list-group-item border-0 py-2" id="second-wrapper">
    <input class="form-check-input me-1" type="checkbox" value="second" id="second" onclick="theFunction(event)">
    <label for="second">Second checkbox</label>
  </li>
  <li class="list-group-item border-0 py-2" id="third-wrapper">
    <input class="form-check-input me-1" type="checkbox" value="third" id="third" onclick="theFunction(event)">
    <label for="third">Third checkbox</label>
  </li>
  <li class="list-group-item border-0 py-2" id="fourth-wrapper">
    <input class="form-check-input me-1" type="checkbox" value="fourth" id="fourth" onclick="theFunction(event)">
    <label for="fourth">Fourth checkbox</label>
  </li>
  <li class="list-group-item border-0 py-2" id="fifth-wrapper">
    <input class="form-check-input me-1" type="checkbox" value="fifth" id="fifth" onclick="theFunction(event)">
    <label for="fifth">Fifth checkbox</label>
  </li>
</ul>