I'm using tippy.js (https://atomiks.github.io/tippyjs/) to load a popup on a button click and inside the popup the plugin loads the html content from another container. Inside this container there is a checkbox (#checkbox1) and a label which ordinarily can be clicked on to change the checked value of the associated checkbox.

Outside the tippy popup this works fine (see #checkbox2 and associated label), however in the process of creating the popup Tippy.js clones the container and therefore there are 2 labels and 2 checkboxes with the same ID resulting in clicking of the lable no longer changing the checked state of the associated checkbox. See simplified code sample below:

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<button id="btn1">Click</button>

<div id="popup" style="display: none;">
  <input type="checkbox" id="checkbox1" />
  <label for="checkbox1">Checkbox 1 Label</label> <!-- clicking this doesn't change the value of the #checkbox1 once cloned inside the tippy popup -->
</div>

<br />
<input type="checkbox" id="checkbox2" />
<label for="checkbox2">Checkbox 2 label</label> <!-- clicking this changes the value of the #checkbox2 -->

<script type="text/javascript">
const template = document.getElementById('popup');

tippy('#btn1', {
  content: template.innerHTML,
  allowHTML: true,
  trigger: "click",
  interactive: true
});
</script>

I've been through lots of the documentation and can't find anyway at present to counteract this or anyone who's had the same issue before. Can anyone suggest a workaround?

There is a JSFiddle of the simplified code here that helps anyone: https://jsfiddle.net/6m83wd4f/