How to make Tables with different ids for Function javascript

Question

Good afternoon
I’m setting up a table with the following code

<table align="center" cellpadding="10" id="user_table" class='table table-striped table-advance table-hover'>
<tr>
<th>NOME</th>
<th>C.P.F.</th>
<th>IDENTIDADE</th>
<th>TEL.</th>
<th>E-MAIL</th>

<th style='text-align: center'>MARCAR</th>
</tr>
<?php
while ($row=mysql_fetch_array($select)) 
{
 ?>
 <tr id="row<?php echo $row['id_paciente'];?>">
  <td > <?php echo $row['nome'] . " " . $data_consulta . " " . $id_m_h;?></td>
  <td > <?php echo $row['cpf'];?></td>
  <td > <?php echo $row['identidade'];?></td>
  <td > <?php echo $row['tel_01'];?></td>
  <td > <?php echo $row['email'];?></td>

  <td style='text-align: center'>       
    <button id="id_c02b_marcar_consulta" type="button"  class="btn"  value="<?php echo $row['id_paciente']?>" >MARCAR <?php echo $row['id_paciente']?></button>
  </td>
 </tr>
 <?php
}
?>
</table>

As you can see inside WHILE has the following line

<button id="id_c02b_marcar_consulta" type="button"  class="btn"  value="<?php echo $row['id_paciente']?>" >MARCAR <?php echo $row['id_paciente']?></button>

Normally I use the following code in java script to perform an action

$('#id_c02b_marcar_consulta').click(function () 
            {               
            funcao_patati_patata($("#id_c02b_marcar_consulta").val(),"<?php $id_usuario; ?>","<?php $id_horario; ?>"); 
            });

As I am in a TABLE and the Ids ARE EQUAL... the above code will only work for the first line.
My idea is that each BUTTON in the table row has to record a record containing id_user, id_patient, id_horario. I’ve got all the variables loaded.
I don’t have much experience in PHP/JAVASCRIPT/JQUERY so I’m not seeing another way to my problem. Make a javascript function that meets all lines of the table
With my current knowledge I would have to have a javascript function for each table line button. Not an option because the table is dynamic and comes from the database.

Answer 1

To fire the same function on multiple elements they need to be identified by classnames.

In HTML:

   <button id="id_c02b_marcar_consulta" type="button"  class="id_c02b_marcar_consulta btn"  value="<?php echo $row['id_paciente']?>" >MARCAR <?php echo $row['id_paciente']?></button>

And at the event:

$('.id_c02b_marcar_consulta').click(function (){console.log('fui clicado')}) 

Answer 2

I’ll stick to the problem in your script.

The problem is that ID’s should be unique on your page. Therefore, when consulting a node per ID, only one value will be returned. This is where css classes come in. Classes can be repeated at their nodes, and return multiple values when consulted.

So you could add a class to the class attribute of the button, which would be:

<button type="button" class="btn marcar-consulta"></button>

With the class in position you could do something like:

$(".marcar-consulta").on("click", function(){
    funcao_que_marca_consulta($(this).val());
});

P.S.: I don’t think you should mix PHP code with Javascript code.