When I click on my button add new row it creates a new row and with the same content as what is in orignal row.

But for each img I would like to be able to have its own unique id / selector rather than the same id.

How am I able to make that possible with code I have.

<script type="text/javascript">
$("#insert-more").click(function () {
     $("#images").each(function () {
        var tds = '<tr>';

        jQuery.each($('tr:last td', this), function () {
            tds += '<td>' + $(this).html() + '</td>';

        tds += '</tr>';

        if ($('tbody', this).length > 0) {

            $('tbody', this).append(tds);

        } else {


$(document).ready(function() {
        selector: '#example', //Click on image to active popover Need get to have own unique id.
        placement: 'right',
        html: 'true',
        content : '<span class="btn btn-primary btn-file"><i class="fa fa-pencil"></i> <input onchange="readURL(this)"  id="file-input" type="file" name="userfile[]"/></span>'

You need to update your line 7. Currently, you copy over the HTML content from the clicked one to the new one...