在按钮点击时使用javascript动态显示带有php表达式的Html div

please help me with my problem, been cranking my head for this one, so basically I want to dynamically add a <div> with form elements on it. I want to append it on button click using javascript. I had it working at first until the part where I have to place a php expression on the <select> tag in the labels and values of the select option comes from my database.

HTML

<div id="file-container" class="container-fluid">
  <div class="form-inline thumbnail">
     <label class="sr-only">File Name</label>
     <input type="text" class="form-control input-sm" name="filename[]" placeholder="File name *">
     <select class="selectpicker" data-live-search="true" title="Choose Article" name="article[]">
     <?php while($row_rsArticles = mysqli_fetch_assoc($rsArticles)){ ?>
        <option value="<?php echo $row_rsArticles['id']; ?>" ><?php echo $row_rsArticles['name']; ?></option>
    <?php } mysqli_data_seek($rsArticles, 0);?>
    </select>
    <div class="radio">
       <fieldset id="group1">
          <label class="radio"><input type="radio" class="radio" name="filemode[] id=group1" value="0">Can View</label>
          <label class="radio"><input type="radio" class="radio" name="filemode[] id=group1" value="1">Can Download</label>
       </fieldset>
     </div>
     <label for="fileinput" class="sr-only">File input</label>
     <input type="file" class="form-control input-sm" name="fileinput[]">
     <button type="button" class="btn btn-danger" id="deletefileinput">Delete</button>
  </div>

SQL

mysqli_select_db($connection, $database);
$query_rsArticles = "SELECT * FROM article order by name asc";
$rsArticles = mysqli_query($connection, $query_rsArticles) or die("Error in retrieving article records");
$totalRows_rsArticles = mysqli_num_rows($rsArticles);

JAVASCRIPT

$(function() {
    var counter = 2; 
    $('#addfileinput').click(function(){
        var newDiv = $('<div class="form-inline thumbnail"><label class="sr-only">File Name</label><input type="text" class="form-control input-sm" name="filename[]" placeholder="File name *"><select class="selectpicker" data-live-search="true" title="Choose Article" name="article[]"><?php while($row_rsArticles = mysqli_fetch_assoc($rsArticles)){ ?><option value="<?php echo $row_rsArticles['id']; ?>" ><?php echo $row_rsArticles['name']; ?></option><?php } mysqli_data_seek($rsArticles, 0);?></select><div class="radio"><fieldset id="group'+counter+'"><label class="radio"><input type="radio" class="radio" name="filemode[] id=group'+counter+'" value="0">Can View</label><label class="radio"><input type="radio" class="radio" name="filemode[] id=group'+counter+'" value="1">Can Download</label></fieldset></div><label for="fileinput" class="sr-only">File input</label><input type="file" class="form-control input-sm" name="fileinput[]"><button type="button" class="btn btn-danger" id="deletefileinput">Delete</button></div>').append(newDiv);
      counter ++;
    });
    });

I think ajax is the way to go. Try this approach...

HTML

<div id="file-container" class="container-fluid">
<div class="form-inline thumbnail">
 <form id="articles_search">
 <label class="sr-only">File Name</label>
 <input id= "srch_input" type="text" class="form-control input-sm" name="filename[]" placeholder="File name *">
 <button class = "btn btn-default" id="articles">Ajax</button>
      </form>
 <div id="srch">

      </div>
<div class="radio">
   <fieldset id="group1">
      <label class="radio"><input type="radio" class="radio" name="filemode[] id=group1" value="0">Can View</label>
      <label class="radio"><input type="radio" class="radio" name="filemode[] id=group1" value="1">Can Download</label>
   </fieldset>
 </div>
 <label for="fileinput" class="sr-only">File input</label>
 <input type="file" class="form-control input-sm" name="fileinput[]">
 <button type="button" class="btn btn-danger" id="deletefileinput">Delete</button>

JAVASCRIPT

  $(document).ready(function() {
  $('#articles').click(function(){
  var title = $("#srch_input").val();
  $.ajax({
  url: 'processing_php_file.php',
  type: "POST",
  data: {'title': $("#srch_input").val()},
  processData: true,
  success: function(data){
  $('#srch').fadeIn(200).html(data);
    },
  error: function(){
  }
  });

  });

PHP

Name of the php file should be processing_php_file.php.

   <?php
   mysqli_select_db($connection, $database); 
   $query_rsArticles = "SELECT * FROM article order by name asc"; 
   $rsArticles = mysqli_query($connection, $query_rsArticles) or 
  die("Error in retrieving article records"); 
  $totalRows_rsArticles = mysqli_num_rows($rsArticles);
  while($row_rsArticles = mysqli_fetch_assoc($rsArticles));
  echo '<select>';
  for ($i=0; $i <sizeof($totalRows_rsArticles) ; $i++) { 

   echo '<option>';
  echo $row_rsArticles['id']; 
  echo $row_rsArticles['name'];
  echo '</option>';
   }
 echo '</select>';
  ?> 

In this example we are querying the database via ajax call and retrieving the data from the database and showing them in the web page without page refresh.

note: You need to modify your php according to your need. I just used the code provided by you as it is just to show you the approach. I added the echo part to show the result in your webpage. You can optimize the look by css.

Hope this helps!