CSS animation only works for the first element

Question

I'm using a jinja template to populate a table. For each row, I want a toggle button in one of the table cells. However, only the first element's toggle button works. When I click on any other buttons, the first element's toggle button moves instead. I have not found any possible ways to fix this, so any suggestions are appreciated.

Below is the css and html related to the toggle button; I can include the rest if needed.

input[type="checkbox"] {
  width: 0;
  height: 0;
  visibility: hidden;
}

label {
  display: block;
  width: 50px;
  height: 30px;
  background-color: rgb(37, 42, 58);
  border-radius: 40px;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
}

label::after {
  content: "";
  width: 15px;
  height: 15px;
  background-color: #eee;
  position: absolute;
  border-radius: 35px;
  top: 7.5px;
  left: 7.5px;
  transition: 0.5s;
}

input:checked+label:after {
  left: calc(100% - 10px);
  transform: translateX(-100%);
}

input:checked+label {
  background-color: #ffc94c;
}

<table class="pure-table pure-table-bordered">
  <thead id="table">
    <tr id="table-heading">
      <th rowspan="2" style="padding: 30px;">
        Name
      </th>
      <th colspan="3" style="border-bottom: 1px solid #cbcbcb">
        Automatic
      </th>
      <th rowspan="2" style="padding: 30px;">
        Last Seen
      </th>
      <th rowspan="2"></th>
    </tr>
    <tr id="table-heading">
      <th>
        Rider
      </th>
      <th>
        Trainer
      </th>
      <th>
        Owner
      </th>
    </tr>
  </thead>
  <tbody>
    <form>
      {% for entity in all_entities %}
      <tr id="table-cell">
        <td>
          <a class="pure-menu-link" href="#">
           {{  entity["name"]  }}
          </a>
        </td>
        <td>
          <input type="checkbox" name="switch" id="switch">
          <label for="switch"></label>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <button id="table-heading" class="pure-button" form="add-row">Edit
          </button>
        </td>
      </tr>
      {% endfor %}
    </form>
  </tbody>
</table>

For reference, see [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — showdev, Oct 16 '21 at 19:12

score 1 · Accepted Answer · answered Oct 16 '21 at 19:04

The issue is that all your input fields have the same id, and thus all your label for="switch" are pointing to the first switch checkbox.

So, you need to have a different id for each switch, and adjust each label's for attribute accordingly. I am not sure how to do this using this particular template engine, but you want to arrive to something like the below.

Side note: You should also have different names for each switch, in order to read each chechbox's value correctly when the form is submitted.

input[type="checkbox"] {
  width: 0;
  height: 0;
  visibility: hidden;
}

label {
  display: block;
  width: 50px;
  height: 30px;
  background-color: rgb(37, 42, 58);
  border-radius: 40px;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
}

label::after {
  content: "";
  width: 15px;
  height: 15px;
  background-color: #eee;
  position: absolute;
  border-radius: 35px;
  top: 7.5px;
  left: 7.5px;
  transition: 0.5s;
}

input:checked+label:after {
  left: calc(100% - 10px);
  transform: translateX(-100%);
}

input:checked+label {
  background-color: #ffc94c;
}

<table class="pure-table pure-table-bordered">
  <thead id="table">
    <tr id="table-heading">
      <th rowspan="2" style="padding: 30px;">
        Name
      </th>
      <th colspan="3" style="border-bottom: 1px solid #cbcbcb">
        Automatic
      </th>
      <th rowspan="2" style="padding: 30px;">
        Last Seen
      </th>
      <th rowspan="2"></th>
    </tr>
    <tr id="table-heading">
      <th>
        Rider
      </th>
      <th>
        Trainer
      </th>
      <th>
        Owner
      </th>
    </tr>
  </thead>
  <tbody>
    <form>
      <tr id="table-cell">
        <td>
          <a class="pure-menu-link" href="#">
           {{  entity["name"]  }}
          </a>
        </td>
        <td>
          <input type="checkbox" name="switch1" id="switch1">
          <label for="switch1"></label>
        </td>
        <td>
          <button id="table-heading" class="pure-button" form="add-row">Edit
          </button>
        </td>
      </tr>
      
      
      <tr id="table-cell">
        <td>
          <a class="pure-menu-link" href="#">
           {{  entity["name"]  }}
          </a>
        </td>
        <td>
          <input type="checkbox" name="switch2" id="switch2">
          <label for="switch2"></label>
        </td>
        <td>
          <button id="table-heading" class="pure-button" form="add-row">Edit
          </button>
        </td>
      </tr>
    </form>
  </tbody>
</table>

Thank you! That was exactly the problem. – trouble_bucket Oct 17 '21 at 14:03 — trouble_bucket, Oct 17 '21 at 14:03

CSS animation only works for the first element

1 Answers1