title: How to pass foreach variable from laravel blade to javascript?
body: <p>Below script is that when press the button, the browser speaks the variable word.
  However, I use <code>@foreach</code> in laravel blade.
  So the only first button works. But rest of buttons generated by foreach doesn't work.</p>
  
  <p>index.blade.php</p>
  
  <pre><code>@foreach($data as $val)
  &lt;h2&gt;&lt;a class="word" href="/?keyword={{$val-&gt;word}}"&gt;{{$val-&gt;word}}&lt;/a&gt;&lt;/h2&gt;      
  &lt;input id="text" type="hidden" value="{{$val-&gt;word}}"&gt;
  &lt;button id="speak-btn"&gt;play&lt;/button&gt;
  @endforeach
  
  &lt;script&gt;
  const text = document.querySelector('#text')
  const speakBtn = document.querySelector('#speak-btn')
  speakBtn.addEventListener('click', function() {
  const uttr = new SpeechSynthesisUtterance(text.value)
  speechSynthesis.speak(uttr)
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>So how can I make all the buttons work? I think I need to use <code>this</code> in javascript. However, I'm new to JS and I don't know how to properly use it. Thank you.</p>