kenapa hanya class komentar pertama saja yg kena efek nya gan?

saya punya tiga class komentar

  <div class="komentar">
            <a href="">Like </a>|<a href="" id="komen"> Komentar</a>
            <textarea name="komentar" placeholder="Komentar..."></textarea>
            <button type="submit" name="komentar">Kirim</button>
  </div>

  <div class="komentar">
            <a href="">Like </a>|<a href="" id="komen"> Komentar</a>
            <textarea name="komentar" placeholder="Komentar..."></textarea>
            <button type="submit" name="komentar">Kirim</button>
  </div>

  <div class="komentar">
            <a href="">Like </a>|<a href="" id="komen"> Komentar</a>
            <textarea name="komentar" placeholder="Komentar..."></textarea>
            <button type="submit" name="komentar">Kirim</button>
  </div>

dan ini javascriptnya

$("#komen").click(function(){
  $(this).parent().toggleClass("tambah");

  event.preventDefault();
});

kenapa yang mau di tambah class nya hanya class komentar yg pertama aja gan? yang bawahnya ketika di klik malah ngerefresh