Can't get my selectors to work on child clones

[TheBigK]

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

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

JS:

$('.clone-skills').cloneya({
            maximum: 5
        }).on('after_clone.cloneya', function(toClone, newClone){
            $(newClone).find(".boo").stepper({
                UI: false,
                allowWheel: true,
                limit: [0, 50],
                wheel_step: 1,
                arrow_step: 1,
                onStep: function(val, up){
                    $(this).val(function(index, val) {
                        if(val <= 1) {
                            return val + " Year";
                        } else {
                            return val + " Years"
                        }
                    });
                }
            });
        });

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!

[actual-saurabh]

Could you please create a jsfiddle for this? In general, it is easier and faster to solve problems if there's a jsfiddle.

[TheBigK]

Sure. Bit new to it; but I should be able to do it fast.

[TheBigK]

@actual-saurabh - While I try and get jsfiddle to work to show the problem I'm facing; I thought I'd simply share the code files: https://www.dropbox.com/s/priab5xs5qibs3m/child-select.zip?dl=0

Please download the zip and open 'form-cloned-elements.html'.

Problem: I've no clue how to apply 'stepper' to the clone.

[TheBigK]

Update: I'm about to give up on jsFiddle. It just won't serve the files from external sources. @actual-saurabh - Could you please download the zip from above URL to check the issue?

[actual-saurabh]

@TheBigK It needs files to be served over https.

[actual-saurabh]

@TheBigK What plugin are you using for stepper? Can you give me a link?

[actual-saurabh]

Ok, figured it out on my own (but please take this as a lesson, please give full details of your problem). Here's your jsfiddle: https://jsfiddle.net/bwyu6c8v/

Now, let me point out that first of all, there is a problem with your html and the way you are selecting things. Please look up the difference between ids and classes. Can you fix the issues there? I can't help you with basic html and jQuery.

[TheBigK]

@actual-saurabh - Thanks a lot for looking into this and your response. I'm pretty new to jQuery and maybe I'm not catching the obvious. Gotta figure out why the clone shows CSS (up and down arrows) but does nothing upon keypress.

[actual-saurabh]

I don't do this for free usually but here's the fixed thing: https://jsfiddle.net/bwyu6c8v/3/ I hope you read and understand what I have done before using it.

[TheBigK]

Seriously, that's more than what I'd have thought of. Looks like a lot of homework to do.