Action from dynamically created element not working

Question

I have a simple code where there are input fields which a user can add and remove by using the + and - icons. But it's working only for the first time and the newly created icons are not working.

Here is the fiddle

$(".glyphicon-plus").on('click',function(){
  var Class = $(this).attr('class');
  var $parent = $(this).parent();

  var div = document.createElement('div');

  var input = document.createElement('input');
  input.type = "text";
  input.className = Class;

  var iconp = document.createElement('i');
  iconp.className = "glyphicon glyphicon-plus";
  //    iconp.className = "glyphicon-plus"

  var iconr = document.createElement('i');
  iconr.className = "glyphicon glyphicon-minus";
  //    iconr.className = "glyphicon-remove";

  div.appendChild(input);
  div.appendChild(iconp);
  div.appendChild(iconr);

  $(div).insertAfter($parent);
})

And what is the reason that the new inputs and the primitive input have different width and new + and - are closer now?

Thanx in advance.