将 id 传递给 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>

Or you could have unique ids for each div and just somehow store that id in a data attribute in the respective button.

 $("input[type='button']").on("click", function(e) { $($(e.target).data("target")).toggle("show"); });

 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" data-target="#answer-list-1" value="OPTIONS 1" /> <input type="button" data-target="#answer-list-2" value="OPTIONS 2" /> <input type="button" data-target="#answer-list-3" value="OPTIONS 3" /> <div class="answer-list" id="answer-list-1">WELCOME 1</div> <div class="answer-list" id="answer-list-2">WELCOME 2</div> <div class="answer-list" id="answer-list-3">WELCOME 3</div>

But you should never use duplicate ids on the same page or duplicate names on the same form.

Answer 2

You can simply do this:

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

But you may think to change id#customDiv to a class.customDiv. It's not good let two or more elements with the same id.

EDIT On button click:

var ids = [];
$( 'div.checkbox' ).find( 'input' ).each( function() {
    var currentID = $( this ).data( 'rowid' );
    // Some code, id verification or others 
    ids.push( currentID );
});

Now ids contains id of all checkbox.

---

Documentation:
https://api.jquery.com/find/
https://www.w3schools.com/jsref/jsref_push.asp
https://api.jquery.com/data/