Selected options are sending to wrong product in cart. I think my id's are messed up.

8 0 1

I added removable options to remove ingredients. This works when I add it to the product page. As you can see in the first 2 images below it allows me to send the selected options to the cart. However, when I add the same feature to the "Featured Product" section, and two on the same page, it does not add the selected options to the second item, it adds it to the first. 




When I select options for another product, it does not send them with that product, but when I leave theme selected and go to the first product again, it sends those selected options to that product. 


This code is in featured-product.liquid on the Brooklyn theme. It is repeating for each product. I am pretty sure the issue is with the id's or input types but I am not sure what I need to change to make this correct. 


          <p class="line-item-property__field">
              {% for item in removeableOptions %}
              <input type="checkbox" id="remove-{{item}}" hidden-data="Modifications" onchange="fillHidden('Modifications')" value="Remove {{item}}"><label for="remove-{{item}}">Remove {{item}}</label><br>
              {% endfor %}
              <input type="hidden" id="Modifications" name="properties[Modifications]">
                function fillHidden(hiddenname) {
                var checkboxes = document.querySelectorAll('[hidden-data="'+hiddenname+'"]');
                var hiddenfield = document.getElementById(hiddenname);
                hiddenfield.value = ""
                var i;
                for (i = 0; i < checkboxes.length; i++) {
                  var x = checkboxes[i];
                      hiddenfield.value = x.value;
                      hiddenfield.value = hiddenfield.value + ", " + x.value;