dynamically created jQueryUI spinner not working

Fiddle Example

I have multiple spinners on the page. Their minimums,maximums and steps depend on their own spinner's data-attributes. I have been using this code to call the spinner:

function spin(){
$( ".spinner" ).each(function(){
   var self = $(this),
       min = self.data('min'),
       max = self.data('max'),
       step = self.data('step');
   $(this).spinner({
    min: min, 
    max: max,
    step: step,
    icons: {up:"tuparrow",down:"tdownarrow"}
  })
});
}
$(document).ready(function(){    
  spin();
})

But I found that when spinners are dynamically created on click, the spin() function isn't working after being called following after. Can anyone know what is the problem?

 $('button').click(function(){
   var area = $('.area').last(),
   newone = area.clone();
   area.after(newone);
   spin();
 })  

HTML:

<button>Click</button>
<div class="area">
  <input data-max="50" data-step="0.01" data-min="0" class="spinner" type="text" name="width[]">
  <input data-max="20" data-step="0.50" data-min="0" class="spinner" type="text" name="diameter[]">
</div>

The problem with your code is you are appending the already initiated spinner html block in your code and you are trying to re-initialize the Spinner for that block.

So, Your var area = $('.area').last() will result,

<div class="area">
<span class="ui-spinner ui-widget ui-widget-content ui-corner-all"><input data-max="50" data-step="0.01" data-min="0" class="spinner ui-spinner-input" type="text" name="width[]" aria-valuemin="0" aria-valuemax="50" autocomplete="off" role="spinbutton"><a class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false"><span class="ui-button-text"><span class="ui-icon tuparrow">▲</span></span>
    </a><a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false"><span class="ui-button-text"><span class="ui-icon tdownarrow">▼</span></span></a>
    </span>
<span class="ui-spinner ui-widget ui-widget-content ui-corner-all"><input data-max="20" data-step="0.50" data-min="0" class="spinner ui-spinner-input" type="text" name="diameter[]" aria-valuemin="0" aria-valuemax="20" autocomplete="off" role="spinbutton"><a class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false"><span class="ui-button-text"><span class="ui-icon tuparrow">▲</span></span>
    </a><a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false"><span class="ui-button-text"><span class="ui-icon tdownarrow">▼</span></span></a>
    </span>
</div>

Which has been already put though the Spinner initialization , So re-initializing it again will have no effect since the effect is already present in your code portion , thus causing the issue.

So, To prevent that simply call destroy event of spinner before cloning the element.

$( ".spinner" ).spinner( "destroy" );
var area = $('.area').last()

Here is the Working Fiddle

P.S

Using this will put an extra overload due to the fact that you will be destroying all the spinner and re-initializing all the spinner. So, You can either destroy the last spinner only or use the suggestion as posted by @Ramesh Kotha in his answer.