LWC accessing data from each for:item in my JS file

Question

I am trying to access specific data in each for:item in my javascript, but am lost.

Parent Component:

<template if:true={responseback}>
   <ul class="slds-m-around_medium">
      <template for:each={students} for:item="student">
        <c-child-form 
            key={student.Id}
            first-name={student.TargetX_SRMb__Contact__r.FirstName} 
            last-name={student.TargetX_SRMb__Contact__r.LastName}
            medical-pick-list-options={medicalReleasePickListValues.data.values}
            medical-pick-list-value={medicalPickListValue}
            travel-pick-list-options={travelReleasePickListValues.data.values}
            travel-pick-list-value={travelPickListValue}
            onbubblechanges={handleBubbleChanges}
          >
        </c-child-form>
    </template>
</template>

Child JS

export default class ChildForm extends LightningElement {
  @api student;
  @api medicalPickListValue;
  @api travelPickListValue;
  @api firstName;
  @api lastName;

  handleChangeMedical(event) {
    this.medicalPickListValue = event.detail.value;
    this.bubbleChanges();
  }

  handleChangeTravel(event) {
    this.travelPickListValue = event.detail.value;
    this.bubbleChanges();
  }

  bubbleChanges() {
    const bubbleChanges = new CustomEvent("bubblechanges", {
      bubbles: true,
      detail: {
        id: this.student,
        medical: this.medicalPickListValue,
        travel: this.travelPickListValue
      }
    });
    this.dispatchEvent(bubbleChanges);
  }
}

Child HTML

<template>
  <lightning-card>
    <li key={studentID}>
      <lightning-formatted-name
        first-name={firstName}
        last-name={lastName}
        style="font-size: 20px"
      >
      </lightning-formatted-name>
      <lightning-combobox
        name="medicalPicklist"
        label="Medical Form"
        placeholder="-Select-"
        value={medicalPickListValue}
        options={medicalPickListOptions}
        onchange={handleChangeMedical}
      >
      </lightning-combobox>
      <lightning-combobox
        name="travelPicklist"
        label="Travel Form"
        placeholder="-Select-"
        value={travelPickListValue}
        options={travelPickListOptions}
        onchange={handleChangeTravel}
      >
      </lightning-combobox>
    </li>
  </lightning-card>
</template>

How can I access data on each for:item in my JS? My goal is to store the change of each form received with its respective ID for the student in a collection variable so I can send that back to my APEX class for processing.

Bubble change handler in Parent JS.

  handleBubbleChanges(evt) {
    // Index
    console.log(`Change Happen at Index: ${evt.detail.index}`);
    // Data from child
    console.log(evt.detail);
  }

I am having two main issues.

1. Picklist Values are not being shown.
2. I want to be able to log (if x student changed the picklist value to add that change to a new object and send it back to apex)

Answer 1

It seems you have 99% of the code already, just add this:

handleBubbleChanges(evt) {
    // Index
    console.log(`Change Happen at Index: ${evt.detail.index}`);
    // Data from child
    console.log(evt.detail);
    // now this has data about the ONE student.
    let student = this.students.find(s => s.id === evt.detail.id); 

  }