title: React: why only the first item checkbox of an unordered list is triggered?
body: <p>I want to render a list of tasks. every task should have a checkbox. I designed the checkbox using css. but now when I clicked on any checkbox, only first list items checkbox is triggered.</p>
  <p>Todo Component</p>
  <pre><code>const Todo = ({ todo, toggleTodo }) =&gt; {
    return (
      &lt;li className='listItem' key={todo.id}&gt;
        &lt;div className='round'&gt;
          &lt;input
            type='checkbox'
            id='checkbox'
            checked={todo.completed}
            onClick={() =&gt; toggleTodo(todo.id)}
          /&gt;
          &lt;label for='checkbox'&gt;&lt;/label&gt;
          &lt;span className=&quot;todo__task&quot;&gt;{todo.task}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    );
  };
  
  export default Todo;
  </code></pre>
  <p>CSS</p>
  <pre><code>.round {
    position: relative;
  }
  
  .round label {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    left: 0;
    position: absolute;
    top: 0;
    width: 20px;
  }
  
  .round label:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: '';
    height: 6px;
    left: 3px;
    opacity: 0;
    position: absolute;
    top: 6px;
    transform: rotate(-45deg);
    width: 12px;
  }
  
  .round input[type='checkbox'] {
    visibility: hidden;
  }
  
  .round input[type=&quot;checkbox&quot;]:checked + label {
      background-color: #66bb6a;
      border-color: #66bb6a;
    }
    
    .round input[type=&quot;checkbox&quot;]:checked + label:after {
      opacity: 1;
    }
    
  </code></pre>
  <p>I want to checkbox to be triggered on every list item. how can I achieve that?</p>