How to list cloned elements from a registered database list. I tried to do with foreach and add the remove button. But it did not work!

<?php foreach ($fonts as $i => $font): $randonId = rand(); ?>
   <div class="<?php echo 'metalElement' . $randonId; ?>" data-clone-it>
    <div class="form-group">
        <?php echo form_dropdown('data[fonts][]', $fonts, $font, 'class="form-control"'); ?>
     </div>
     <?php if($i > 0): ?>
        <button type="button" class="<?php echo 'metalElement' . $randonId . 'BtnRemove'; ?> metal-btn-remove button button-danger button-block" style="margin-bottom: 20px" data-metal-ref="<?php echo '.metalElement' . $randonId; ?>">
              <i class="fa fa-trash-o"></i> 
                  Delete
               </button>
        <?php endif; ?>
    </div>
<?php endforeach;?>

Trying to implement onComplete event function even console.log
Nothing happening

Can you add on next version such option?
For making REMOVE button as defined element without clonin it.
For example

[Add row .cloneBtn] [Remove row .removeBtn]

copyValue is a very hard parameter and sometimes you may want to keep values ​​of certain elements, with for example, hidden fields.

To fit your beautiful plugin to my needs, I created a new parameter for it: clearExceptions

(...)
currentClearExceptions = opt.clearExceptions,
(...)

function clearForm (container) {
  container.find ('input: not (input [type = button], input [type = submit], input [type = checkbox], input [type = radio] "), textarea, select' ) {
    $ (this) .not (currentClearExceptions) .val ('');
  });
}

(... fn.metalClone.defaults)
clearExceptions: '', // Make exception for elements that you do not want to clear

Where can I pass the new option informing the name of the elements of which I want to keep a copy of the value

Example:

$ ('. group'). metalClone ({
  btnClone: ​​'# btnAdd',
  copyValue: false,
  clearExceptions: '#current_user_id',
  enableAnimation: false,
});

I think we should implement auto unique id for name attribute. Just the same way as it is for id attribute.

There are so many backend developers who would use something like this in their html.

<input name="attendees[0][first_name]" type="text">
<input name="attendees[1][first_name]" type="text">
<input name="attendees[2][first_name]" type="text">

What do you guys think?

Great looking plugin but it doesn't work with jQuery 3.2.1 and I was hoping to get some assistance.

I'm using the example #2 from the web site (metalClone):

<div class="toClone_example2">
<input type="text">
<select id="m">
<option value="">--Please Select</option>
<option value="Hello">Hello</option>
</select>
</div>
<div class="container_body">
<input type="button" class="btn_example2" value="Create New Copy">
</div>
and the js:

// Example 2
$('.toClone_example2').metalClone({
btnClone : '.btn_example2',
copyValue : true
})

Here is a jsFiddlel working with jQuery 2.3x
https://jsfiddle.net/SavageCatHV/nseawghs/

and here is the jsFiddle with jQuery 3.3.x
https://jsfiddle.net/SavageCatHV/nseawghs/1/

You'll need to open the console window.

After npm intall, in app.js add
require('jquery-metal-clone')

then npm run watch

the ouput error : ERROR in ./js/app.js
Module not found: Error: Can't resolve 'jquery-metal-clone' in '/var/www/html/app/js'
@ ./js/app.js 19:0-29
@ multi ./js/app.js

i made the same process for
require('bootstrap-sass');
require('select2');
require('rangeslider.js');
require('parsleyjs');
require('parsleyjs/dist/i18n/fr');
require('parsleyjs/dist/i18n/fr.extra');
require('slick-carousel');
require('jquery-touchswipe');

and all is working fine

error with webpack laravel mix