Can't change values for attributes "id" in <input> tag and for "for" in <label> tag

[larek]

The following HTML code does not allow the use of two or more components on the page, because when you click on the <label> tag, the browser will use only one checkbox. This is due to the fact that the values of the attributes for and id in the tags <label> and <input> may coincide with the values in another component

First component

<input type="checkbox" name="Product 1" id="1" />
<label for="1" title="Product 1" class="super-treeview-text">Product 1</label>

Second component

<input type="checkbox" name="Customer 1" id="1" />
<label for="1" title="Customer 1" class="super-treeview-text">Customer 1</label>