obtenir des informations dans la division php javascript

Question

Lorsque je clique sur le bouton « me cliquent sur », l'ID sélectionné sera imprimé à la var divtest puis disparaître dans le <div id="container"> et quand je clique sur l'autre bouton « me cliquent sur » il obtient seulement le premier id mais tout ce que je veux est le deuxième identifiant dans la base de données pour montrer. Si j'essaie de supprimer la description sélectionnée, je reviendrai au conteneur de la description de l'ID.

Mon exemple de base de données.

ID Description  
1 Hello 
2 Hi 
3 Thank You 

Ceci est mon exemple de code.

<?php 
    $conn = mysqli_connect("localhost", "root", "","dblaquaresort") or die("Failed to Connect"); 
    $sql = "SELECT * FROM tblsample"; 
    $query = mysqli_query($conn, $sql); 
    while ($sample = mysqli_fetch_array($query)) 
    { 
    ?><div id="container"> 
    <label id="ID">ID: <?php echo $sample['ID']; ?></label> 
    <label id="Description">Description: <?php echo $sample['Description']; ?></label> 
    <button type="button" id="more_fields" onclick="add_fields();">Click me</button> </div> 
    <?php 
    } 
    ?> 

    <div id="room_fileds"> 
    <div> 
     <div class="content"> 
     <?php 
       function not_empty_string($s) 
       { 
       return $s !== " "; 
       } 
       $pieces = array_filter(explode(",", "Test"),'not_empty_string'); 
       foreach ($pieces as $piece) 
       { 
       $test_stinga = array_filter(explode("-", $piece),'not_empty_string'); 
       $test_stinga=preg_replace('/\s+/', '', $test_stinga); 
       } 
      ?> 
     </div> 
    </div> 
    </div> 
      <script> 
       var room = 1; 
       var wrapper = $(".testtt"); 
       function add_fields() 
       { 
       room++; 
       var objTo = document.getElementById('room_fileds'); 
       var ID = document.getElementById('ID').innerHTML; 
       var Desc = document.getElementById('Description').innerHTML; 
       var divtest = document.createElement("div"); 
       divtest.innerHTML = '<div class="label">TEST ' + room + ':</div> <div class="content"><span><p class="form-inline">Testing: '+ ID +'</span><span>Description: ' + Desc + '</span><button class="remove"> Remove</button></p></div>'; 
        objTo.appendChild(divtest) 
         } 
        $('#room_fileds').on("click",".remove", function(e) 
        { 
        $(this).parents().eq(5).remove(); 
        }) 
       </script> 

Ceci est la sortie que je veux.

Div Container 
ID: 1 Description: Hello <button>click me</button> 
ID: 2 Description: Hi <button>click me</button> 
ID: 3 Description: Thank You <button>click me</button> 

Si je clique sur l'ID = 2.

Div Container 
ID: 1 Description: Hello <button>click me</button> 
ID: 3 Description: Thank You <button>click me</button> 

Divtest 
ID: 2 Description: Hi <button>Remove</button> 

Si je clique sur le supprimer, il sera de retour dans Div Container.

ID: 1 Description: Hello <button>click me</button> 
ID: 2 Description: Hi <button>click me</button> 
ID: 3 Description: Thank You <button>click me</button> 

Answer 1

Vous créez le même ID pour les éléments HTML les 3 fois dans cette boucle:

while ($sample = mysqli_fetch_array($query)) 

Cet élément <div id="container"> sera 3 fois selon votre exemple, vous devez faire chaque id différent. Vous pouvez utiliser le Id de la ligne votre fetching de la base de données afin que vous puissiez faire quelque chose comme:

while ($sample = mysqli_fetch_array($query)) 
    { 
    ?><div id="container_<?php echo $sample['ID']; ?>"> 
    <label id="ID_<?php echo $sample['ID']; ?>">ID: <?php echo $sample['ID']; ?></label> 
    ...... 

donc quand vous ajoutez ce <?php echo $sample['ID']; ?> à votre html ids comme: id="container_<?php echo $sample['ID']; ?>" vous créez des identifiants uniques pour les éléments, vous avez besoin pour ce faire, avoir des ID html uniques.

Maintenant, vous devez modifier votre fonction javascript:

function add_fields() 

et tu construiras obtient un paramètre, comme:

function add_fields(id) 

et vous pouvez passer l'identifiant de la ligne, il » serez:

<button type="button" id="more_fields_<?php echo $sample['ID']; ?>" onclick="add_fields(\"<?php echo $sample['ID']; ?>\");">Click me</button> </div> 

et vous aurez besoin de modifier le contenu de la fonction, de travailler avec cette id:

function add_fields(id) 
    { 
    room++; 
    var objTo = document.getElementById('room_fileds_'+id); 
    ..... 

J'espère que cela aide.