Select any div from a foreach

Question

Can someone help me? I have this problem when selecting the text inside the div, just select the first foreach text, wanted to select what I click and not only the first

    <?php foreach($dado as $dados): ?>

    <div>
        <p id="pegardiv" name="pegardiv" ><?php echo $dados['descricao']; ?></p>
        <div>
            <button id="pegar" onclick="pegarDiv()" class="btn btn-primary">Pegar</button>
            <!-- <a href="javascript:;" id="pegar" onclick="pegarDiv()" class="btn btn-primary">pegar</a> -->
        </div>
        <hr>
<?php endforeach; ?>

//jquery

function pegarDiv(){
var valorDaDiv = $("#pegardiv").text();

$("#fato").val(valorDaDiv);
$('#modal').modal('hide');
$('#fato').attr('rows','3');

}

Answer 1

First, the IDs of the elements HTML must be unique on the page, inside that foreach, all have the same, using the variable $i, we will create an identifier for each of the DIVs to make them unique:

<?php 
    foreach($dado as $dados): 
    $i=1; 
?>
    <div>
        <p id="pegardiv-<?php echo $i;?>" name="pegardiv" ><?php echo $dados['descricao']; ?></p>
        <div>
            <button onclick="pegarDiv()" aria-id="pegardiv-<?php echo $i;?>" class="pegar btn btn-primary">Pegar</button>
            <!-- <a href="javascript:;" id="pegar" onclick="pegarDiv()" class="btn btn-primary">pegar</a> -->
        </div>
        <hr>
<?php 
    $i++;
    endforeach; 
?>

In the JQUERY how the IDs were equal, probably would occur this error, we will find a way to make them unique, or at least identifiable by click:

function pegarDiv(){
    var ths = $(this);
    var ariaId = ths.attr("aria-id");
    var valorDaDiv = $("#"+ariaId).text();
    $("#fato").val(valorDaDiv);
    $('#modal').modal('hide');
    $('#fato').attr('rows','3');
}

Remembering that this is only one of the forms, not that it is the best, nor the most correct, but functional.

Answer 2

By the specifications, the attribute name is invalid in an element <p>. If your HTML structure is shown in the question, you don’t even need id nor name, even because you are repeating the id’s, so you will only get the first one because you should not repeat id’s on the same page. At most you could use the same class in the elements, if this is of any use. But on the buttons you must convert the id="pegar" in class so you can differentiate these buttons from others you may have on the page.

Then the HTML of the button would look like this, removing the id and adding the "catch" class to the list of classes:

<button onclick="pegarDiv()" class="btn btn-primary pegar">Pegar</button>

See that each button is inside a div with the <p> before, then just use some jQuery methods to get to paragraph text.

Instead of using the attribute onclick, use a Event Handler, thus:

$(function(){ // aguarda o DOM ser carregado

   $(".pegar").on("click", function(){

      var valorDaDiv = $(this).closest("div").prev("p").text().trim();
      $("#fato").val(valorDaDiv);
      $('#modal').modal('hide');
      $('#fato').attr('rows','3');

   });

});

The .trim() serves to eliminate blank spaces on text borders.

Testing:

$(function(){ // aguarda o DOM ser carregado

   $(".pegar").on("click", function(){
      
      var valorDaDiv = $(this).closest("div").prev("p").text().trim();
      console.log(valorDaDiv);
      $("#fato").val(valorDaDiv);
      // $('#modal').modal('hide');
      $('#fato').attr('rows','3');
      
   });
   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>desc1</p>
<div>
   <button class="btn btn-primary pegar">Pegar</button>
</div>
<hr>
<p>desc2</p>
<div>
   <button class="btn btn-primary pegar">Pegar</button>
</div>
<hr>