How to append the value in forloop and jquery HTML
<p>I want to do PG booking, I have one form field in that field(index.php) i select room sharing like 1 sharing or 2 sharing etc...after select this pg sharing i passed the value in next page(pg_deatils.php) through AJAX and i select from DB which room are having 1 sharing or 2 sharing after i return the value in index.php still i am getting correct after that i want append the value in html,insteed of Room 1,Romm 2... i want append the value of console.log(value.pg_id);// 2,1 and insteed of Bed 1,Bed1...i want to append console.log(value.room_number);//room1,room2</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function showDiv(toggle){
  var sharing=$("#sharing").val();
  $.ajax({
    type: "POST",
    url: "pg_details.php",
    data: "sharing_id="+sharing,
    success: function(data) {
      var res =jQuery.parseJSON(data);
      console.log(res);
      if(res['return'] == 1){
        var htmlString=''; 
        $.each( res['data'], function( key, value ){
          console.log(value.pg_id);// 2,1
          console.log(value.room_number);//room1,room2
        });
      }
    }
  });
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
  &lt;div class="col-md-3"&gt;&lt;/div&gt;
  &lt;div class="col-md-6"&gt;
    &lt;h3 style="text-align:center;color:white; margin-top:70px;padding-bottom:30px;"&gt;PG Booking System&lt;/h3&gt;
    &lt;form class="form-horizontal" &gt;       
      &lt;div class="form-group"&gt;
        &lt;label class="control-label col-sm-2" for="phone"&gt;Sharing:&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;select class="form-control" name="sharing" id="sharing"&gt;
            &lt;option value=""&gt;---select---&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="form-group" style="margin-top:30px;"&gt;
        &lt;div class="col-sm-offset-5 col-sm-8"&gt;
          &lt;button type="button" class="btn btn-primary" name="answer" onclick="showDiv('toggle')" style=" margin-top:50px;margin-bottom:50px;"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;  
  &lt;/div&gt;
  &lt;div class="col-md-3"&gt;&lt;/div&gt;
&lt;/div&gt; 


&lt;!--This HTML i want to append--&gt;

&lt;div id="toggle" style="display:none"&gt;
  &lt;div class="container" style=" margin-bottom: 30px;"&gt;
    &lt;div class="row"&gt;
      &lt;h4 style="margin-left:15px;"&gt;PG NAME 1&lt;/h4&gt;
      &lt;div class="col-sm-10"&gt;
        &lt;div class="btn-group" id="btnmar"&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px; "&gt;Bed 1&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px;"&gt;Bed 2&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px; "&gt;Bed 3&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px; "&gt;Bed 4&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px;"&gt;Bed 5&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px; "&gt;Bed 6&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px;"&gt;Bed 7&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px;"&gt;Bed 8&lt;/button&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!--hidden 6 end--&gt;
      &lt;!--hidden 4 start--&gt;
      &lt;div class="col-sm-2"&gt;
        &lt;div class="panel-group"&gt;
          &lt;div class="panel panel-primary"&gt;
            &lt;div class="panel-heading"&gt; Premium Facility&lt;/div&gt;
            &lt;div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"&gt;&lt;i class="fa fa-television" aria-hidden="true" style="margin-right:15px;"&gt;&lt;/i&gt;T.V.&lt;/div&gt;
            &lt;div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"&gt;&lt;i class="fa fa-wifi" aria-hidden="true" style="margin-right:15px;"&gt;&lt;/i&gt;Wifi&lt;/div&gt;
            &lt;div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"&gt;&lt;i class="fa fa-bed" aria-hidden="true" style="margin-right:15px;"&gt;&lt;/i&gt;Bed&lt;/div&gt;
            &lt;div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"&gt;&lt;i class="fa fa-shopping-basket" aria-hidden="true" style="margin-right:15px;"&gt;&lt;/i&gt;Washing Machine&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--hidden 4 end--&gt;
    &lt;/div&gt;
    &lt;!--row1 end--&gt;
    &lt;!--row2 start--&gt;
    &lt;div class="row"&gt;
      &lt;h4 style="margin-left:15px;"&gt;PG NAME 2&lt;/h4&gt;
      &lt;div class="col-sm-10"&gt;
        &lt;div class="btn-group" id="btnmar"&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px;"&gt;Bed 1&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px;"&gt;Bed 2&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px;"&gt;Bed 3&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px;"&gt;Bed 4&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px;"&gt;Bed 5&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px;"&gt;Bed 6&lt;/button&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!--hidden 6 end--&gt;
      &lt;!--hidden 4 start--&gt;
      &lt;div class="col-sm-2"&gt;
        &lt;div class="panel-group"&gt;
          &lt;div class="panel panel-primary"&gt;
            &lt;div class="panel-heading"&gt; Classic Facility&lt;/div&gt;
            &lt;div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"&gt;&lt;i class="fa fa-television" aria-hidden="true" style="margin-right:15px;"&gt;&lt;/i&gt;T.V.&lt;/div&gt;
            &lt;div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"&gt;&lt;i class="fa fa-wifi" aria-hidden="true" style="margin-right:15px;"&gt;&lt;/i&gt;Wifi&lt;/div&gt;
            &lt;div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"&gt;&lt;i class="fa fa-bed" aria-hidden="true" style="margin-right:15px;"&gt;&lt;/i&gt;Bed&lt;/div&gt;
            &lt;div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"&gt;&lt;i class="fa fa-shopping-basket" aria-hidden="true" style="margin-right:15px;"&gt;&lt;/i&gt;Washing Machine&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--hidden 4 end--&gt;
    &lt;/div&gt;
    &lt;!--row2 end--&gt;
    &lt;!--row2 start--&gt;
    &lt;div class="row"&gt;
      &lt;h4 style="margin-left:15px;"&gt;PG NAME 3&lt;/h4&gt;
      &lt;div class="col-sm-10"&gt;
        &lt;div class="btn-group" id="btnmar"&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px;"&gt;Bed 1&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px;"&gt;Bed 2&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px;"&gt;Bed 3&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px;"&gt;Bed 4&lt;/button&gt;
          &lt;/a&gt;
          &lt;a href="register.php"&gt;
            &lt;button type="button" class="btn btn-primary" style=" width: 71px;"&gt;Bed 5&lt;/button&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!--hidden 6 end--&gt;
      &lt;!--hidden 4 start--&gt;
      &lt;div class="col-sm-2"&gt;
        &lt;div class="panel-group"&gt;
          &lt;div class="panel panel-primary"&gt;
            &lt;div class="panel-heading"&gt; Basic Facility&lt;/div&gt;
            &lt;div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"&gt;&lt;i class="fa fa-television" aria-hidden="true" style="margin-right:15px;"&gt;&lt;/i&gt;T.V.&lt;/div&gt;
            &lt;div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"&gt;&lt;i class="fa fa-wifi" aria-hidden="true" style="margin-right:15px;"&gt;&lt;/i&gt;Wifi&lt;/div&gt;
            &lt;div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"&gt;&lt;i class="fa fa-bed" aria-hidden="true" style="margin-right:15px;"&gt;&lt;/i&gt;Bed&lt;/div&gt;
            &lt;div class="panel-body" style=" padding-top: 5px; padding-bottom: 5px;"&gt;&lt;i class="fa fa-shopping-basket" aria-hidden="true" style="margin-right:15px;"&gt;&lt;/i&gt;Washing Machine&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--hidden 4 end--&gt;
    &lt;/div&gt;
    &lt;!--row3 end--&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>pg_details.php</p>

<pre><code>&lt;?php
  include_once("admin/config.php");
  include("functions.php");
  //$pg_name=Getpg($_POST['pg_id']);
  $sharing=$_POST['sharing_id'];//Getting Sharing Value

  $sql=mysql_query("SELECT * FROM rooms WHERE room_sharing='$sharing'");
  $count = mysql_num_rows($sql);
  if($count &gt; 0){
    while($row=mysql_fetch_assoc($sql)){
      $data[]= $row;
    }
    $pg_type= array("return"=&gt;1,"count" =&gt;$count,"data" =&gt;$data);
    echo $pg_type = json_encode($pg_type);
  }else{
    $pg_type= array("return"=&gt;0,"count" =&gt;0,"data" =&gt;"");
    echo $pg_type = json_encode($pg_type);
  }
?&gt;
</code></pre>