title: The correct way to put the id/class in HTML using foreach to get the exact value?
body: <p>I've successfully displays the data using for each here is the code:</p>
  
  <pre><code>&lt;?php 
    foreach($jawapan as $row_jawapan):
  ?&gt;
    &lt;li class="vote-li" &gt;
      &lt;div class="round-button-circle"&gt;
        &lt;span&gt;&lt;/span&gt;
        &lt;h1&gt;&lt;?php echo $row_jawapan-&gt;answer_text;?&gt;&lt;/h1&gt;
        &lt;input class="id_answer" type="hidden" value="&lt;?php echo $row_jawapan-&gt;id_option;?&gt;"&gt;
        &lt;input class="answer_text" type="hidden" value="&lt;?php echo $row_jawapan-&gt;answer_text;?&gt;"&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;?php endforeach; ?&gt;
  </code></pre>
  
  <p>Now I want to get the exact value when user click on it using this code:</p>
  
  <pre><code>$('.vote-li').on('click', function(){
    var id_question = $('.id_question').val(),
        answer_text = $('.answer_text').val(),
        user_id = $('.user_id').val(),
        id_option = $(this).prop('id');
  
    var data = {
      id_question: id_question,
      user_id: user_id,
      id_option: id_option,
      answer_text: answer_text
    };
    console.log(data);
  });
  </code></pre>
  
  <p>Now every time user click on the <code>vote-li</code> class the <code>console.log</code> only display the first index item even the item value is different. I think I made mistake in written the <code>class/id</code> in the <code>input</code> element, but I don't know how to put the correct id/class so that my jQuery can extract the correct data.</p>