투두리스트 체크박스 질문

투두리스트 input란에 글자입력하면 이렇게 글자랑 체크박스가 뜨고,
체크박스를 누르면 파란색으로 바뀌게 했는데...
그 어떤 체크박스를 누르던 맨 위에 체크박스만 색이 바뀝니다..
문제를 못찾겠어요 ㅜㅜ 도와주세요 선생님!!!!


---------------App.js------------------
function InsertView(props) {
  return (
    <div className="list-post">
    {
    props.post.map(function(a,i) {
      return (
      <div clasName="post" key={i}>
          <input className="post-chk" type="checkbox" id="chk"></input>
          <label for="chk"></label>
          <label for="chk" className="post-p">{props.post[i]}</label>
      </div>
    )
    })
    }
  </div>
  )
}
----------------------------------------------


---------------index.css------------------
}
.post-chk{
    display: none;
}
.post-chk + label {
    width: 33px;
    height: 32px;
    display: inline-block;
    border: 2px solid black;
    margin-top: -1px;
    background-color: white;
    border-radius: 10px;
}
.post-chk:checked + label {
    background: blue;
}