When I press the button it should add one more div, like the one below, calling JS function called comida_campos(). 
<div class="panel panel-default">
    <div class="panel-body">
        <div id="comida_campos">
        </div>
        <div class="col-sm-6 nopadding">
            <div class="form-group">
                <input id="quantidade" class="form-control"name="quantidade[]" placeholder="Quantidade/g" type="text" value="">
            </div>
        </div>
        <div class="col-sm-6 nopadding">
            <div class="form-group">
                <div class="input-group" id="replicate"> 
                    <select class="form-control" name="alimento[]">
                        <option value="">Alimento</option>
                        <script>
                            document.write('<?php
                                $it=0;
                                while($it <= 9){
                                echo '<option value="'.$array_of_aliments[$it]['Idalimento'].'">'.$array_of_aliments[$it]['alimento'].'</option>';
                                $it++;
                                }
                            ?>');
                        </script>
                    </select>
                    <div class="input-group-btn">
                        <button class="btn btn-success" onclick="comida_campos();" type="button">
                            <span aria-hidden="true" class="glyphicon glyphicon-plus"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
Result of the code

Here is the JS fuction:
var room = 1;
function comida_campos() {
    room++;
    var objTo = document.getElementById('comida_campos')
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "form-group removeclass" + room);
    var rdiv = 'removeclass' + room;
    divtest.innerHTML = '<div class="col-sm-6 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Degree" name="Degree[]" value="" placeholder="Quantidade/g"></div></div><div class="col-sm-6 nopadding"><div class="form-group"><div class="input-group"> <select class="form-control" id="educationDate" name="alimento[]"><option value="">Date</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields(' + room + ');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
    objTo.appendChild(divtest)
}
The problem is that I want to insert my PHP while circle is inside the divtest.innerHtml, and I don't have any idea how to do this.
 
     
    