Pass a button id inside a while (in php) to a java script code and print the id inside a modal

Question

I have two buttons in a table that sits inside a while (in php code) and I have a modal outside that while structure. My question is how can I get the individual id inside my table that is inside the loop and play in the input field with javascript?

Note: I had already asked a similar question and deleted, because, the question was too vague and I decided to try to see if I could get something, however, I could not.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  
 <!-- Tabela --> 
<div style='white-space:nowrap;'>
<table class='table table-striped'>
<thead>
<tr><th>Situação</th><th>Contrato</th><th>Número</th><th>Conclusão Prevista</th><th >Alterar</th><th>Detalhes</th></tr>
</thead>
<tbody style='color: white;'>
<tr><td style='background-color:#ad2525'>$situacao</td><td style='background-color:#CD5555'>$contrato</td><td style='background-color:#ad2525'>$numero</td><td style='background-color:#CD5555'>$data às $hora</td><td style='background-color:#ad2525' align='center'><button class='btn btn-sucess' data-toggle='modal' data-target='#Alt' data-whatevernome='$rows_cursos['codigo']'></button></td><td style='background-color:#CD5555' align='center'><button class='btn btn-warning' data-toggle='modal' data-target='#Modal$codigo'></button></td></tr>
</tbody>
</table>
</div>

<!-- Tabela -->

<!-- Modal 2 -->
<div class="modal fade" id="Alt" role="dialog" data-backdrop="false" style=" background: rgba(0,0,0,0.5);">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class='row'>
<div class='col-sm-5'>
<h4 class="modal-title" style='margin-right: 140px;'>Alterar</h4> 
</div>
<form method="post" action="func/define.php" enctype="multipart/form-data">
<div class='col-sm-5 text-right' style='float: right'>
<button type='submit' class='btn btn-danger'>Alterar</button>
<button type='button' class='btn btn-primary' data-dismiss='modal'>Sair</button>
</div>
</div>
</div>
<div class="modal-body">
<p>				
<label for="message-text" class="control-label">Detalhes:</label>
<input name="id_codigo" class="form-control" id="id_codigo" />
</p>
</div>
</div>
</div>
</div>	
<!-- Modal 2 -->

To use the same logic as the input in a combo box it is only necessary to declare the id and name as it follows the code:

$(function () { $(".glyphicon-edit").click(function () { // Pego o valor dentro do class
                var id_value = $(this).data('codigo'); // botão que abre a modal
                $(".modal-body #id_codigo").val(id_value); // insere valor no input
})
});

<!--Campo Situaçao-->
<label for="id_codigo" class="control-label" >
Situação:<br></label>
<div class="input-group col-lg-6">
<div class="input-group-addon">
<span class='glyphicon glyphicon-alert'></span>
</div>

<!-- Para o valor ser reconhecido, somente se declara o id e name -->
<select type='text' class="form-control" id="id_codigo" name="codigo"> 
<!-- Para o valor ser reconhecido, somente se declara o id e name -->

<option id="id_codigo">id="id_codigo"</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<!--Fim Campo Situaçao-->

Answer 1

Use the Bootstrap event that captures the button that opened the modal. Then you take the value of the button attribute and insert it into the input within the modal:

$('#Alt').on('show.bs.modal', function(event){ // evento que detecta a abertura da modal
   var bt = $(event.relatedTarget);            // botão que abriu a modal
   var id = bt.data('whatevernome');           // valor do data
   $(this).find('#id_codigo').val(id);         // insere valor no input
});