如何在按钮单击时添加带有mysql表数据的下拉列表？

I want to add dropdown list when user clicks at button. The data inside this dropdown list is fetched from mysql data table. Whenever user clicks at the button javascript function addfile() is called which uses append function to add html content on web page. The problem is that dropdown list html content is populated with mysql database table. Is there any way to store the database table values before hand and then use this data at client side to genrate dropdown list at user click and populate it with already fetched data.

eg..

<p id="file_div">
        <label for="skills" class="icon-pencil">Key Skills
        </label><br/>
       <!-- <input type="text" name="txtSkill[]" placeholder="Skill" style='width:90%;' />--><?php if(isset($errorSkill)){echo $errorSkill;}?>
        <select name="ddlSkill[]">
                                <?php 
                                    $conn = mysqli_connect("localhost","root","","jobportal");
                                    $sql = "SELECT * FROM skills";
                                    $stmt = $conn->query($sql); 
                                    while($row = $stmt->fetch_array()){
                                        echo "<option>";
                                        echo $row[1];
                                        echo "</option>";
                                    };
                                ?>
        </select>
    </p>
     <p>
        <button type="button" onClick="add_file();" class="add_more btn btn-info">
        <span class="icon-plus"></span> Add More Skills
        </button>
    </p>


<script>
function add_file()
{   
 $("#file_div").append("<p style='margin-top:10px;'>
                   <select name='ddlSkill[]'>
                        <?php 
                            $conn = mysqli_connect('localhost','root','','jobportal');
                            $sql = 'SELECT * FROM skills';
                            $stmt = $conn->query($sql); 
                            while($row = $stmt->fetch_array()){
                                echo '<option>';
                                echo $row[1];
                                echo '</option>';
                            };
                        ?>;
                    </select>
                    <img src='images/cross.jpg' width='20px' title='Delete this Skill' class='cursor-link' onclick=remove_file(this);></p>");
}

function remove_file(ele)
{
 $(ele).parent().remove();
}
</script>

Try this.

    <p id="file_div">
        <label for="skills" class="icon-pencil">Key Skills
        </label><br/>
       <!-- <input type="text" name="txtSkill[]" placeholder="Skill" style='width:90%;' />--><?php if(isset($errorSkill)){echo $errorSkill;}?>
        <div id="dropdown-create">

        </div>
    </p>
     <p>
        <button type="button" onClick="add_file();" class="add_more btn btn-info">
        <span class="icon-plus"></span> Add More Skills
        </button>
    </p>
<script>
function add_file()
{   
 $.ajax({
                type: "POST",
                url: "index.php",/*current file name*/
                async:false,
                data: {func:'dropdown'},
                success: function(res){
                        list = res;
                        $("#dropdown-create").html("");
                        $("#dropdown-create").html(list);   
                   }
                });  
}
if($_REQUEST['func'] == 'dropdown'){
   <?php 
      $conn = mysqli_connect("localhost","root","","jobportal");
      $sql = "SELECT * FROM skills";
      $stmt = $conn->query($sql); 
      echo '<select name="ddlSkill[]">';
      while($row = $stmt->fetch_array()){
          echo "<option>";
          echo $row[1];
          echo "</option>";
      };
      echo '</select>';
      exit();
} ?>
</script>