php - Fixing jQuery plugin to handle duplicating nested fields with unique ID's -

i have quick question guys here. handed set of lead generation pages , asked them , running. forms great, expect 1 small issue... use jquery below allow users submit multiple instances of data set clicking "add item" button. problem duplicated items duplicated exactly. same name, id, etc. obviously, doesn't work when attempting process data via php, first set used.

i'm still learning jquery, hoping point me in right direction how modify plugin below assign each duplicated field incremental integer on end of id , name assigned. so, fields in each dataset role, description, age. each additional dataset use id & name syntax of fieldname#, # represents numbers increasing 1.

thanks in advance advice!

/** https://github.com/reallygood/jquery.duplicate */  $.duplicate = function(){    var body = $('body');    body.off('duplicate');    var templates = {};    var settings = {};    var init = function(){      $('[data-duplicate]').each(function(){        var name = $(this).data('duplicate');        var template = $('<div>').html( $(this).clone(true) ).html();        var options = {};        var min = +$(this).data('duplicate-min');        options.minimum = isnan(min) ? 1 : min;        options.maximum = +$(this).data('duplicate-max') || infinity;        options.parent = $(this).parent();          settings[name] = options;        templates[name] = template;      });            body.on('click.duplicate', '[data-duplicate-add]', add);      body.on('click.duplicate', '[data-duplicate-remove]', remove);    };        function add(){      var targetname = $(this).data('duplicate-add');      var selector = $('[data-duplicate=' + targetname + ']');      var target = $(selector).last();      if(!target.length) target = $(settings[targetname].parent);      var newelement = $(templates[targetname]).clone(true);            if($(selector).length >= settings[targetname].maximum) {        $(this).trigger('duplicate.error');        return;      }      target.after(newelement);      $(this).trigger('duplicate.add');    }        function remove(){      var targetname = $(this).data('duplicate-remove');      var selector = '[data-duplicate=' + targetname + ']';      var target = $(this).closest(selector);      if(!target.length) target = $(this).siblings(selector).eq(0);      if(!target.length) target = $(selector).last();            if($(selector).length <= settings[targetname].minimum) {        $(this).trigger('duplicate.error');        return;      }      target.remove();      $(this).trigger('duplicate.remove');    }        $(init);  };    $.duplicate();

add [] end of name attribute of input field example:

<input type ="text" name="name[]"

this way $post['name'] hold array of strings. element. array keys numbers 0 many items holds.