Salesforce Lightning Multiple Instance of Checkbox Alternate doesn't work correctly

Question

I am trying to use Checkbox Alternate Lightning code as a code of CheckboxAlternate component

<aura:component >
    <fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Scheduled Day(s)</legend>
  <div class="slds-form-element__control">
    <div class="slds-checkbox--button-group">
      <span class="slds-button slds-checkbox--button" for="monday">
        <input type="checkbox" name="checkbox" id="monday" />
        <label class="slds-checkbox--button__label" for="monday">
          <span class="slds-checkbox--faux">Mon</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="tuesday">
        <input type="checkbox" name="checkbox" id="tuesday" />
        <label class="slds-checkbox--button__label" for="tuesday">
          <span class="slds-checkbox--faux">Tue</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="wednesday">
        <input type="checkbox" name="checkbox" id="wednesday" />
        <label class="slds-checkbox--button__label" for="wednesday">
          <span class="slds-checkbox--faux">Wed</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="thursday">
        <input type="checkbox" name="checkbox" id="thursday" />
        <label class="slds-checkbox--button__label" for="thursday">
          <span class="slds-checkbox--faux">Thu</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="friday">
        <input type="checkbox" name="checkbox" id="friday" />
        <label class="slds-checkbox--button__label" for="friday">
          <span class="slds-checkbox--faux">Fri</span>
        </label>
      </span>
    </div>
  </div>
</fieldset>
</aura:component>

and I have CheckboxAlternateApp where I use this component multiple time (in my case I use it three times.

I receive unexpected results displayed in this video GIF image.

When I click on the first instance it works well, but when I click on the the second and the third instances it doesn't display selected checkboxes of that instance correctly but instead unchecks or checks the checkboxes of the first instance.

Does anyone know a way to overcome this and make this work correctly?

Answer 1

I found so far the following solution.

I changed the code of my application to the following one:

<aura:application extends="force:slds">
    <c:CheckboxAlternate ix="1"/>
    <c:CheckboxAlternate ix="2"/>
    <c:CheckboxAlternate ix="3"/>
</aura:application>

and I changed the code of the component to this one:

<aura:component >
    <aura:attribute name="ix" type="String" />
    <fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Scheduled Day(s)</legend>
  <div class="slds-form-element__control">
    <div class="slds-checkbox--button-group">
      <span class="slds-button slds-checkbox--button" for="{!v.ix+'monday'}">
        <input type="checkbox" name="checkbox" id="{!v.ix+'monday'}" />
        <label class="slds-checkbox--button__label" for="{!v.ix+'monday'}">
          <span class="slds-checkbox--faux">Mon</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="{!v.ix+'tuesday'}">
        <input type="checkbox" name="checkbox" id="{!v.ix+'tuesday'}" />
        <label class="slds-checkbox--button__label" for="{!v.ix+'tuesday'}">
          <span class="slds-checkbox--faux">Tue</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="{!v.ix+'wednesday'}">
        <input type="checkbox" name="checkbox" id="{!v.ix+'wednesday'}" />
        <label class="slds-checkbox--button__label" for="{!v.ix+'wednesday'}">
          <span class="slds-checkbox--faux">Wed</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="{!v.ix+'thursday'}">
        <input type="checkbox" name="checkbox" id="{!v.ix+'thursday'}" />
        <label class="slds-checkbox--button__label" for="{!v.ix+'thursday'}">
          <span class="slds-checkbox--faux">Thu</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="{!v.ix+'friday'}">
        <input type="checkbox" name="checkbox" id="{!v.ix+'friday'}" />
        <label class="slds-checkbox--button__label" for="{!v.ix+'friday'}">
          <span class="slds-checkbox--faux">Fri</span>
        </label>
      </span>
    </div>
  </div>
</fieldset>
</aura:component>