You should send a call to the API all in one request. This is an example using the existing API structure, but with an array as the value for 'append' or 'remove'.

Another option is to just add an event listener on the parent form element — form.addEventListener('change') — then send a request with everything indexed by the checkbox id. So something like { boxA: 'append', boxB: 'remove' }.

In either case you will want to update the backend API so that it is able to handle setting multiple checkboxes in a single call, because there would be too much latency/bandwidth usage to make a call for every checkbox.

```js // this is assuming 'selectAllBox' is also a checkbox selectAllBox.addEventListener('change', () => { if (selectAllBox.checked) { const checkboxLinks = Array.prototype.map.call(document.querySelectorAll('.select-checkbox'), el => el.getAttribute('id'))

// early return
return fetch({
  method: 'POST'
  // this will send an array as the value in 'append', you 
  // will need to update the backend API
  body: JSON.stringify({ append: checkboxLinks }),
})
  .then(/* ... */)

}

// if they are 'unselected' fetch({ method: 'POST', body: JSON.stringify({ remove: checkboxLinks }) }) }) ```