Ajax does not work with Modal Bootstrap

Question

Hello, I have the following code, where the Modal Bootstrap opens from a BD search when I click on an item from the returned list:

<input type="text" name="pesquisa" id="pesquisa">
<table class="resultado">
</table>

So far so good, it returns the values correctly, opens the Modal with the correct ID, but when I click the button to run, it runs the function only with the first item of the ID column of the BD, ie, works only with ID "1", the other ID it does not return the value in content.

function reg_prod() {
  $.ajax({
    type: "POST",
    url: "../_php/nova_entrega_reg_prod.php",
    data: {
      produto: $('#id').val(),
    },
    success: function(data) {
      $('#conteudo').html(data);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
<div class="modal fade" id="myModal<?php echo $qry['id']?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			<h4 class="modal-title" id="myModalLabel">Titulo</h4>
			</div>
			<div class="modal-body" style="white-space: normal;">
        <input type="text" name="nome" id="id" value="<?php echo $qry['id']?>">
			</div>
      
			<div id="conteudo">Teste</div>
      
			<div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
			<button type="button" onClick="reg_prod()" class="btn btn-success">Registrar</button>
			</div>
		</div>
	</div>
</div>

Here in content he should return, in this case, the same ID he opened the MODAL

<?php
$produto = $_POST['produto'];

echo $produto;
?>

Does anyone know why this happens?

Answer 1

You gotta get the id of each input of the respective modal. The way you are doing, you will always get the id of the first modal to find, and still has to define ids different for each thing. What you are doing is repeating ids, which is incorrect. A id should be unique on the same page.

Change the ids of the elements using the PHP value:

<input type="text" name="nome" id="id<?php echo $qry['id']?>" value="<?php echo $qry['id']?>">

Since you want to pass the value of the field that is itself id, nor needs the attribute id="id", being like this:

<input type="text" name="nome" value="<?php echo $qry['id']?>">

and in the div also put the id of PHP...

<div id="conteudo<?php echo $qry['id']?>">Teste</div>

Pass the id as a parameter for Ajax in onclick:

<button type="button" onClick="reg_prod('<?php echo $qry['id']?>')" class="btn btn-success">Registrar</button>

And change the Ajax function to receive and send the id:

function reg_prod(i) {
  $.ajax({
    type: "POST",
    url: "../_php/nova_entrega_reg_prod.php",
    data: {
      produto: i,
    },
    success: function(data) {
      $('#conteudo'+i).html(data);
    }
  });
}