How to assign different value to each switch toggle in HTML

I have this code i get from w3schools. I need to create 8 switch toggle button and assign a number to each of them as well setting their id so I can call/refer it later on.

Here's my code

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {display:none;}

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }
        .slider:before {
            position: absolute;
            content: "${count}";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

    </style>
</head>
<body>

<c:set scope="page" value="0" var="count"/>
<c:forEach begin="1" end="4" varStatus="loop">
    <c:forEach begin="1" end="2" varStatus="loop">
        <label class="switch" id="seat${count}">
            <input type="checkbox">
            <span class="slider"></span>
            <c:set scope="page" value="${count+1}" var="count"/>
        </label>
    </c:forEach>
    <br><br>
</c:forEach>


</body>
</html>

I tried to use a loop to set it's label, although it was not working. I also tried to put the id as you can see from the code below but I'm not sure how to call it yet.

So how to assign unique label and id to each of the buttons and how can I call it later on? This page will be included in another page later on. Thanks in advance!

Solution

The example you trying to use doesn't allow for labels. You'd need to modify the approach. I've put together something that should handle all the things you need:

// demo to show handling of changes

var switches = document.querySelectorAll('.switch');

switches.forEach(function(item){
  item.addEventListener('change', function(){
    var checkbox = this.querySelector('input'),
        data = checkbox.dataset;

    checkbox.value = checkbox.checked ? data.on : data.off;
  });
});

/* ----- start demo code ----- */

body {
  font-family: "Roboto";
  font-size: 14px;
  margin: 0;
  padding: 0;
}

.switches {
  margin: 20px;
}

.switches h1 {
  font-size: 1.5em;
  margin-bottom: 20px;
}

/* ----- end demo code ----- */

.switch {
  display: inline-block;
  height: 34px;
  min-width: 60px;
  position: relative;
  vertical-align: middle;
}

.switch.disabled {
  cursor: default;
  opacity: 0.5;
}

.switch .slider {
  background-color: #d9d9d9;
  bottom: 0;
  color: #fff;
  cursor: pointer;
  display: block;
  height: 34px;
  left: 0;
  padding: 0 20px 0 40px;
  position: relative;
  right: 0;
  top: 0;
  transition: 0.4s;
}

.switch .slider .on,
.switch .slider .off {
  line-height: 34px;
}

.switch .slider .off {
  display: block;
}

.switch .slider .on {
  display: none;
}

.switch .slider:before {
  background-color: #fff;
  bottom: 4px;
  content: " ";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: all 0.4s;
  width: 26px;
}

.switch .slider.round {
  border-radius: 34px;
}

.switch .slider.round:before {
  border-radius: 50%;
}

.switch input {
  display: none;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

.switch input:checked + .slider {
  background-color: #2196f3;
  padding: 0 40px 0 20px;
}

.switch input:checked + .slider:before {
  left: auto;
  right: 4px;
  transition: all 0.4s;
}

.switch input:checked + .slider .on {
  display: block;
}

.switch input:checked + .slider .off {
  display: none;
}

<div class="switches">
  <h1>Simple Switches</h1>
  
  <label class="switch">
    <input type="checkbox" data-on="Yup" data-off="Nope" value="Nope">
    <span class="slider round">
      <span class="on">On</span>
      <span class="off">Off</span>
    </span>
  </label>

  <label class="switch">
    <input type="checkbox" data-on="good" data-off="bad" value="bad">
    <span class="slider round">
      <span class="on">Superpowers On</span>
      <span class="off">Superpowers Off</span>
    </span>
  </label>

  <label class="switch">
    <input type="checkbox" data-on="abc" data-off="def" value="def">
    <span class="slider round"></span>
  </label>
</div>

DEMO here as well

You could adapt this by changing your code above to

<c:forEach begin="1" end="4" varStatus="loop">
  <c:forEach begin="1" end="2" varStatus="loop">
    <label class="switch">
       <input type="checkbox" id="seat${count}" name="seat${count}" data-on="onValue" data-off="offValue" value="offValue">
       <span class="slider round">
         <span class="on">On</span>
         <span class="off">Off</span>
       </span>
     </label>
  </c:forEach>
</c:forEach>