StackOverflow q:71798689 [html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stack Overflow Demo</title>

    <!-- This is the css stylesheet import -->
    <link rel="stylesheet" href="style.css">

    <!-- This is the javascript import containing our function definitions-->
    <script src="./logic.js"></script>

    <script>
        //this is the call to our main function running our logic
        main();
    </script>
</head>
<body>

    <!-- This is the template of our checkbox-label model that will be used by our js logic to add an arbitrary number of them -->
    <template>
        <p></p>
        <label class="switch">
            <input type="checkbox" id="ck" onchange="onCheckBoxStateChange(event);">
            <span class="slider round hide-off"></span>
        </label>
        <br/>
        <div class="hideme" id="label-ck">Label bound to checkbox</div>
        <hr/>
    </template>

    <!-- This is the button on top that will add a new Checkbox-Label pair to the page when pressed -->
    <input type="button" value="Add a new checkbox to the page" onclick="addCheckboxLabelPair();" />
    <!-- This is the next button on top that will reset the memory held in localStorage -->
    <input type="button" value="Reset the Local Storage" onclick="cleanLocalStorage();" />
    <!-- This is the next button on top that will reset the memory held in localStorage -->
    <input type="button" value="Reload the page" onclick="pageReload();" />

    <!-- This is where it shows the number of checkbox states are saved in the localStorage -->
    <div class="info">
        This is the number of checkbox states saved in the Local Storage:<span id="stored_states_count"></span><br>
        Add new checkboxes to the page to see their saved state<br>
        And Remember to reload the page to see that value updated
    </div>

    <p>checkbox1</p>
    <label class="switch">
        <input type="checkbox" id="ck1">
        <span class="slider round hide-off"></span>
    </label>
    <br/>
    <div class="hideme" id="label-ck1">Label bound to checkbox1</div>
    <hr/>

    <p>checkbox2</p>
    <label class="switch">
        <input type="checkbox" id="ck2">
        <span class="slider round hide-off"></span>
    </label>
    <br/>
    <div class="hideme" id="label-ck2">Label bound to checkbox2</div>
    <hr/>

</body>
</html>