[SOLVED] Dynamic initialization of multiple steppers on same page

Questions
1

I want to initialize stepper on cart page, there are separate stepper for each item, but when i dynamically initialize stepper using call.

Changing of any stepper changes value in only first one.

<div class="col-40">
 <div class="stepper stepper-small color-gray">
  <div class="stepper-button-minus"></div>
  <div class="stepper-value">1</div>
  <div class="stepper-button-plus"></div>
 </div>
</div>
<div class="col-40">
 <div class="stepper stepper-small color-gray">
  <div class="stepper-button-minus"></div>
  <div class="stepper-value">1</div>
  <div class="stepper-button-plus"></div>
 </div>
</div>

Javascript code

var stepper = app.stepper.create({
                    el: '.stepper',
                    step: 1,
                    min: 1,
                    max: 100,
                    value: 1,
                    on: {
                        change: function () {
                            console.log('Stepper value changed')
                        }
                    }
                });
2

You need to init each stepper explicitly:

$('.stepper').each(function(index, stepperEl) {
  var stepper = app.stepper.create({
    el: stepperEl,
    step: 1,
    min: 1,
    max: 100,
    value: 1,
    on: {
        change: function () {
            console.log('Stepper value changed')
        }
    }
});
})
3

Thank you @nolimits4web. It worked. :smiley:

4

Hi @nolimits4web, I have one question, if I am dynamically initializing multiple smart-select as stepper then how will we be able to manage events of any particular smart-select if we are changing values, is there any pre-defined or tested way?

Any suggestions will be helpful.

Thanks.