Multiple stepper sync

Questions
1

I want to create two steppers which can sync. When I click the plus button twice (first stepper), it can sync and the value is 2. However, after i click the plus button (second stepper), the value goes back to 1, and click the minus button (second stepper), there is no response. Please help me! Thank you.

    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Apples: <span class="apples-count"></span></div>
        <div class="item-after">
          <div class="stepper stepper-init stepper-small stepper-raised" data-value-el=".apples-count">
            <div class="stepper-button-minus"></div>
            <div class="stepper-button-plus"></div>
          </div>
        </div>
      </div>
    </li>
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Apples: <span class="apples-count"></span></div>
        <div class="item-after">
          <div class="stepper stepper-init stepper-small stepper-raised" data-value-el=".apples-count">
            <div class="stepper-button-minus"></div>
            <div class="stepper-button-plus"></div>
          </div>
        </div>
      </div>
    </li>
2

Hi, you just shared the layout, not the full code, so i cannot see what you are doing
stepper API:
https://framework7.io/docs/stepper.html

app.stepper.setValue(el, value)- set new Stepper value
el - HTMLElement or string (with CSS Selector). Stepper element.value - number