<div id="badge-1" class="badge">
<div class="badge-body">
<div class="badge-header"></div>
<div class="photo-bg">
<div class="photo">
<img class="image" src="" alt="">
<div class="upload-file-container">
<input type="file" class="imgUpload" required="required" />
</div>
</div>
</div>
<div class="badge-name">
<p class="name">
<input type="text" placeholder="Фамилия" required="required" maxlength="15" />
</p>
<p class="name">
<input type="text" placeholder="Имя" required="required" maxlength="15" />
</p>
</div>
</div>
</div>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.image').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$(".imgUpload").change(function(){
readURL(this);
});
</script>id="badge-2". Они (бейджи) могут добавляться на страницу. И у каждого нового будет этот счетчик id будет увеличиваться.
Уж простите за офтоп, но всё это мне напоминает это вот эту статью.