获取除法PHP JavaScript中的信息

Question

When I clicked the button " click me ", the selected ID will print to the var divtest then fade out in the <div id="container"> and when I clicked the another button " click me " it only gets the first id but all I want is the second id in the database to show. If I try to remove the selected description it will go back to the container of ID description.

My database sample.

ID Description    
1    Hello
2    Hi
3    Thank You

This is my sample 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>

This is the output I want.

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>

If i click the 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>

If I Click the remove it will go back in 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

You're creating the same ID for the HTML elements the 3 times in this loop:

while ($sample = mysqli_fetch_array($query)) 

This element <div id="container"> will be 3 times according to your example, you need to make each id different. You can use the Id of the row your fetching from the database so you can do something like:

 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>
    ......

so when you add this <?php echo $sample['ID']; ?> <?php echo $sample['ID']; ?> to your html ids like: id="container_<?php echo $sample['ID']; ?>" you create unique ids for the elements, you need to do this to have unique html ids.

Now you need to modify your javascript function:

function add_fields() 

you shall make it gets a parameter, like:

function add_fields(id)

and you can pass the id of the row, so it'll be:

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

and you'll need to modify the content of the function, to work with that id :

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

I hope this helps.