Make checkboxes unique

I have a page with about 1000 images on it, it is not a public page but rather an image manager for a websites content management system I have created.

Because of the large amount of images, there are many available filters to narrow down the result set.

Each image in the repeat also has a checkbox allowing the user to select that particular image to perform an action on, or a bulk action if multiple images are selected.

This is where the issue comes in, upon checking the box, it adds that id to an array, and just carries on adding more or removing from the array as different images are selected.
In this example

1. I set a filter, server action runs, 10 results display
2. I check image 1,3,5
3. I remove the filter and set a different filter, server action runs and 15 results display

The problem is the new images from the new filter now already have checkboxes ticked for images 1,3,5 even though the array data still has the IDs of the correct images which are no longer being displayed.

I do not really understand why it is doing this, has anyone else come across an issue like this, any ideas how to fix. Here is my code snippet.

<dmx-array id="arr_save_for_web"></dmx-array>
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="scimagelist.data.queryImageList" id="tr-image-list">
    <tr>
        <td>
            <div class="mb-4">
                <!-- {{mil_id}} is unique for every record -->
                <div class="form-group form-check">
                    <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" id="sfwselector" dmx-bind:id="sfwselector_{{mil_id}}" name="sfwselector" dmx-bind:name="sfwselector_{{mil_id}}" dmx-on:click="sfwselector.checked ? arr_save_for_web.remove(value) : arr_save_for_web.addUniq(value)" dmx-bind:value="mil_id">Save For Web Selector
                    </label>
                </div>
            </div>
        </td>
    </tr>
</tbody>