javascript - appending select elements with options populated by php -

i'm newbie in web programming. need dynamically create select element in form. options of select element populated php.

i have no idea how this. have code cannot work. can create select tags options not being populated.

html code:

 <div id='page3'>   <input type='button' id='aprod'>  </div> 

js code:

$('#aprod').on('click',function(){ $('#page3').append('<select class="input" id="name_of_product" name="name_of_product"> <option value="">---</option>  <?php include("config.php");   $qry = $handler->prepare( "select * product_list plist_compid = ?");  $qry->execute(array($id));   while($row = $qry->fetch(pdo::fetch_assoc)){   $p_id = $row["plist_id"];    $p_name = $row["plist_name"];    echo "<option value= "$p_name">$p_name</option>";   }   ?>   </select>'); }); 

a normal way is:

<div id='page3'> <select style="display:none;" class='input' id='name_of_product' name='name_of_product'>           <option value=''>---</option>            <?php include("config.php");             $qry = $handler->prepare( "select * product_list plist_compid = ?");            $qry->execute(array($id));             while($row = $qry->fetch(pdo::fetch_assoc)){                 $p_id = $row["plist_id"];                  $p_name = $row["plist_name"];                  echo '<option value= \"'.$p_name'\">'.$p_name.'</option>';             }              ?>        </select>   <input type='button' id='aprod'>  </div> 

js:

$('#aprod').on('click',function(){ $('select input').show(); $('#aprod').hide(); });