Как переключать массив элементов в HTML с помощью JavaScript

Question

У меня есть вопрос по поводу переключения. Мне нужно переключить кнопку редактирования итерации. У меня есть 7 компонентов (скрытых по умолчанию), после нажатия кнопки редактирования компонент будет отображаться в зависимости от buttonId, соответствующего разделам Visible.

Использовать массив sectionVisible для переключения раздела в порядке, соответствующем идентификатору кнопки.

JavaScript:

toggleVisibility: function(component, event, helper) {
  let sectionsVisible = [];
  const buttonId = event.getSource().get("v.buttonId");
  console.log("buttonId: "+buttonId);
  const index = sectionsVisible.indexOf("profile-edit-section");
  console.log("index: "+index);
}

Код для кнопки:

<aura:iteration items="{!v.personalProfileDetails}" var="personalDetail" indexVar="index">
               <div>
                    <c:wsButton variant="base"
                    smallButton="true"
                    label="{!$Label.c.edit}"
                    title="{!$Label.c.edit}"
                    iconName="utility:edit"
                    iconPosition="left"
                    buttonClickEvent="{!c.toggleVisibility}"
                    buttonId="{!index}"
                    />
                </div>

Раздел:

<section id="profile-edit-section" class="{!'profile-edit-section' + if(v.isSectionVisible, ' slds-show', ' slds-hide') }">
<div>
    <c:primaryEmail />
</div>

<div>
    <c:password />   
</div>

<div>
    <c:name />
</div>

<div>
    <c:mobile />
</div>

<!-- Address -->
<div>
    <c:details />
</div>

<div>
   <c:address />
</div>

<div>
    <c:preference />
</div>

Консоль

buttonId: 0 1 2 3 4 5 6 индекс: -1 -1 -1 -1 -1 -1 -1