Unable to select element properly

Unable to select element properly

I'm not sure if my approach is right; but here's what I wish to do. Please look at the following image -




I have a group of fields that I clone by clicking on the [ + ] button; and cloning works fine. Here's the code -

HTML: 
  1. <input type="text" name="resumeSkillYears[]" id="<?php echo "resumeSkillYears_" . $i; ?>" class="boo gui-input" placeholder="Years" value="<?php echo $value['skillYears']; ?>" >

JS:

  1. $('.clone-skills').cloneya({
  2.             maximum: 5
  3.         }).on('after_clone.cloneya', function(toClone, newClone){
  4.             $(newClone).find(".boo").stepper({
  5.                 UI: false,
  6.                 allowWheel: true,
  7.                 limit: [0, 50],
  8.                 wheel_step: 1,
  9.                 arrow_step: 1,
  10.                 onStep: function(val, up){
  11.                     $(this).val(function(index, val) {
  12.                         if(val <= 1) {
  13.                             return val + " Year";
  14.                         } else {
  15.                             return val + " Years"
  16.                         }
  17.                     });
  18.                 }
  19.             });
  20.         });
--

Because the ID of the element is dynamically incrementing, I thought I'd rather append a class "boo" to my element and select it through my JS. 

However, above code applies the stepper to the parent being cloned (the top row) against the newly created last row. Apparently I'm doing something wrong with 'find'. 

Can someone help? Thanks!