how to append html to dynamically created html part

function add_items()
        {
            var ingrediants_name = $("input[name='hidden_name[]']").map(function(){return $(this).val();}).get();
            mystat++;
        var my=mystat;
            console.log(my);
            
            
            
            $('#ingrdiants_table').append('<tr> <th class="no">'+my+'</th><td ><select class="selectpicker input-xlarge" name="ingredients_name[]" id="ingredients_name[]" style="width:200px;" >\n\
\n\
     \n\
</select>\n\
</td> <td><input type="text" name="ingrediant_quant[]" class="form-control"></td></tr>');
            //var selecter = $("input[name='ingredients_name[]']").map(function(){return $(this).val();}).get();
            
            var letters = "";
            for (i = 0; i < my; i++) 
            {
                for(j=0;j<ingrediants_name.length;j++)
                {
                    //$("#ingredients_name[0]").append('<option>'+ingrediants_name[j]+'</option>');
                    letters += '<option>'+ingrediants_name[j]+'</option>';
                }
                document.getElementById("ingredients_name[0]").innerHTML = letters;
            }
          
        }

<div class="modal fade" id="myModal" role="dialog">
                            <div class="modal-dialog">
    
                                <!-- Modal content-->
                                <div class="modal-content" style="width:700px;">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <button class="btn btn-primary" type="button" name="add" onclick="add_items()">Add Ingredients</button>
                                    </div>
                                    <div class="modal-body">
                                        <table id="ingrdiants_table" class="table table-bordered table-hover">
                                            <thead>
        
                                                <th>N</th>
                                                <th>Ingrediant Name</th>
                                                <th>Quantity</th>
                                                
                                            </thead>
                                            <tbody>
        
                                            </tbody>
    
                                        </table>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        <button type="button" class="btn btn-default" id="pencat">save</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    

Please help me to resolve this. I am creating select option dynamically on click with append in java script. I have assigned select option id="name[]",now i want to assign option to all of select option box through append or something better. how can it work?

via Chebli Mohamed