I want to make a toggle button in a check box somewhere else

I’d like to inquire.
I created a page with a product list.
If you press the “Inquiry” button at the top, the inquiry form comes down, and there is a product list check box in it.

In the list of products outside, click the “Add to Inquiry” button in the list to check the check box of the inquiry form.
At this time, I want to release the checkbox check by pressing the “Add to Inquiry” button again. It functions like “Toggle”.

https://thepagegallery49.cafe24.com/wp/publication/

The code I used is as follows.

List ‘Inquire Button’

                <div class="news-text-box">
                <span class="addbtn" id="<?php the_sub_field('pbtag'); ?>"><span class="addon active">Add in Inquire</span><span class="addoff">Added</span></span>             </div>

Javascript

    document.getElementById("<?php the_sub_field('pbtag'); ?>").addEventListener("click", () => {
    document.querySelector('input[value="<?php the_sub_field('pbtitle'); ?>"]').checked = true;
    document.querySelector('input[value="<?php the_sub_field('pbtitle'); ?>"]').parentElement.classList.toggle('active');
})

Checkbox

<ul id="wpforms-187-field_28">
<li class="choice-1 depth-1"><input type="checkbox" id="wpforms-187-field_28_1" name="wpforms[fields][28][]" value="Matters of Life and Death"><label class="wpforms-field-label-inline" for="wpforms-187-field_28_1">Matters of Life and Death</label></li>
<li class="choice-2 depth-1 active"><input type="checkbox" id="wpforms-187-field_28_2" name="wpforms[fields][28][]" value="Displacements"><label class="wpforms-field-label-inline" for="wpforms-187-field_28_2">Displacements</label></li>
...
</ul>