Dinamically Ajax

Olá pessoal.

Estou com uma dúvida, estou desenvolvendo um sistema e no mesmo estou criando um gerador de curso com o usuário poderá inserir varias informações como imagens, textos, videos entre outros Até ai tudo bem, criei o sistema e utilizei a função dinamically. O que eu gostaria de saber é se tem como fazer uma função dinâmica dentro de outra.

Exemplo: o usuário clica no botão de adicionar foto ele cria um campo para inserir foto só que o mesmo quer inserir mais de uma foto ai teria um botão para adicionar mais fotos do lado do campo já criado. Tem como fazer? Pois eu tentei da mesa forma que eu fiz o primeiro dinamico e não deu certo.

Agradeço a ajuda.

$('#add-Imagem').on('click', function(){
 var html = '';
 html += '<div class="portlet light" style="border: 1px solid #e7ecf1;">';
 html += ' <div class="portlet-title">';
 html += ' <div class="caption">';
 html += ' <i class="fa fa-film font-grey-gallery"></i>';
 html += ' <span class="caption-subject bold font-grey-gallery uppercase"> Videos </span>';
 html += ' <span class="caption-helper">adicione um aquivo de videos</span>';
 html += ' </div>';
 html += ' <div class="tools">';
 html += ' <a href="" class="collapse"> </a>';
 html += ' <a href="" class="remove"> </a>';
 html += ' </div>';
 html += ' </div>';
 html += ' <div class="portlet-body">';
 html += ' <div class="row" id="cotent-imagem">';
 html += '<button type="button" class="btn btn-block default" name="Imagem" id="Imagem"> <i class="fa fa-picture-o"></i> IMAGEM</button>';
 html += ' <div class="col-md-4">';
 html += '<div class="form-group text-center">';
 html += '<label class="control-label"></label>';
 html += '<div class="">';
 html += '<div class="fileinput fileinput-new" data-provides="fileinput">';
 html += '<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">';
 html += '<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" /> </div>';
 html += '<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"> </div>';
 html += '<div>';
 html += '<span class="btn default btn-file">';
 html += '<span class="fileinput-new"> Select image </span>';
 html += '<span class="fileinput-exists"> Change </span>';
 html += '<input type="file" name="..."> </span>';
 html += '<a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput"> Remove </a>';
 html += '</div>';
 html += '</div>';
 html += '</div>';
 html += '</div>';
 html += '</div>';
 html += ' </div>';
 html += ' </div>';
 html += '</div>';
 $('#conteudo-curso').append(html);
 });
 $('#Imagem').on('click', function(){
 var html = '';
 html += ' <div class="col-md-4">';
 html += '<div class="form-group text-center">';
 html += '<label class="control-label"></label>';
 html += '<div class="">';
 html += '<div class="fileinput fileinput-new" data-provides="fileinput">';
 html += '<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">';
 html += '<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" /> </div>';
 html += '<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"> </div>';
 html += '<div>';
 html += '<span class="btn default btn-file">';
 html += '<span class="fileinput-new"> Select image </span>';
 html += '<span class="fileinput-exists"> Change </span>';
 html += '<input type="file" name="..."> </span>';
 html += '<a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput"> Remove </a>';
 html += '</div>';
 html += '</div>';
 html += '</div>';
 html += '</div>';
 html += '</div>';
 $('#cotent-imagem').append(html);
 });