javascript - Passing id to jquery function

Question

I have a button and a hidden div.

Button:

<input 
type="button" 
id="myButton" 
name="answer" 
value="OPTIONS" 
style=" margin-top: -30px; margin-bottom: 10px;float: right;background-color: #C80918;border: none;color: #ffffff" 
onclick="showDiv()" />

Hidden div:

<div id="customDiv"  style="display:none;" class="answer_list" > WELCOME</div>

I have included a function to hide/show the div:

$('#myButton').click(function() {
  $('#customDiv').toggle('slow', function() {
    // Animation complete.
  });
});

The button and the div are included inside a PHP loop. There is an identifier for every loop, it is $row['id'].

Now, when the button is clicked, only the first item from the loop is showing its div, I would need to pass the id to the jquery function to identify which button/item is clicked.

How could I change my code to pass the id of every loop item to the jquery function?

EDIT

<?php

//output customizable

$customizable = $row["customizable"];


if ($customizable == 1){

  $output .= '
    <div class="col-md-3 col-sm-6 col-xs-6" style="margin-top:12px;">  

    <div class="item-content" >

    <button type="button" style="float: right;background-color: Transparent;border: none;"  data-toggle="modal" data-target="#modalPort"
    data-id="'.$row["id"].'" ><img src="info.png" width=30 

    ></button>


    <div class="img-container">
    
    <img src="../administrar/application/admin/productos/'.$row["image"].'" class="img-responsive" /><br />

    <h4 class="text-info" style= "color:#666">'.$row["nombre"].'</h4>
    
    <h4 class="text-info" style= "color:#000"><strong>'.$row["name"].'<strong></h4>
    <h5 class="text-info" style= "color:#000">'.$row['descripcion'].'</h5>
    <h4 class="text-danger" style= "color:#000">$ '.$row["price"] .'</h4>

     
<input 
type="button" 
id="myButton" 
name="answer" 
value="OPTIONS" 
style=" margin-top: -30px; margin-bottom: 10px;float: right;background-color: #C80918;border: none;color: #ffffff" 
onclick="showDiv()" />

    <input style= " color:#000" type="text" name="comentarios" id="comentarios' . $row["id"] .'"  placeholder="Special Instructions" class="form-control" value="" />
    <br>
    ';

    if($statement_opc->execute())
    {
      $numero_opciones = 0;
      $result_opc = $statement_opc->fetchAll();
      foreach($result_opc as $row_opc)
      {



        if ($row_opc['producto'] == $row['id']) {
          
          $numero_opciones = $numero_opciones + 1;
          $output .= '
          <div class="checkbox">
          <label><input type="checkbox" data-nombre="'. $row_opc["nombre"] .'" 
    data-precio="'. $row_opc["precio"] .'"  id="opcion'.$row["id"].'"   class="opcion_cbox" 
    data-rowid="'. $row["id"] .'"  value="">'.$row_opc['nombre'].' (+ $'.$row_opc['precio'].')</label>
          </div>


        
          ';

        }
      }
    }
?>
//zona custom


  <?php
   $output .= '

   <div id="customDiv"  style="display:none;" class="answer_list" > WELCOME</div>





   ';
  ?>


  
    //fin zona custom

Answer 1

You could connect each button to the respective div using their individual index (so the first button will toggle the first div, the second will toggle the second...)

var buttons = $("input[type='button']");
var answers = $(".answer-list");

buttons.each(function(index, dom) {
  $(dom).on("click", function(e) {
    $(answers[index]).toggle("slow");
  });
});

body {
  display: block;
  height: 120px;
}

input[type="button"] {
  background-color: #C80918;
  margin-bottom: 10px;
  /*margin-top: -30px;*/
  color: #ffffff;
  float: right;
  border: none;
}

.answer-list {
  display: none;
}

.answer-list.slow {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="OPTIONS 1" />
<input type="button" value="OPTIONS 2" />
<input type="button" value="OPTIONS 3" />

<div class="answer-list">WELCOME 1</div>
<div class="answer-list">WELCOME 2</div>
<div class="answer-list">WELCOME 3</div>