I'm trying to write some code where I have three buttons; 1, 2 and 3. I also have 3 videos that are being retrieved from my database with a `foreach` loop.

On click of button 1 it should display video 1, button 2 should display video 2, button 3 should display video 3 etc.

What would be the jQuery code for this? This is what I've tried:

```html
<script>
  $("#videos").hide();

  $("#button1").on('click', function() {
    $("#videos").toggle();
  });

  $("#button2").on('click', function() {
    $("#videos").toggle();
  });

  $("#button3").on('click', function() {
    $("#videos").toggle();
  });
</script>

<button id="button1">1</button>
<button id="button2">2</button>
<button id="button3">3</button>

<div id="videos">
  @foreach($videos as $video)
    <video width="400" controls>
      <source src="/videos/{{ $video->videofile }}" type="video/mp4">
    </video> 
  @endforeach
</div>

```

When clicking on the buttons all the videos are showing or not showing at all.

How do I set individual targets for the buttons?