modify document in Firebase

[HanyTaha61]

hi all,
When I try to update a specific document in an array of documents on Firebase using modifyProject() function, it always update the last document, even if I specified the document with the auto-generated ID.
this is the project repo: https://github.com/HanyTaha61/vuetify-project
And here is the code and functions:

*-- I cycle through projects object from the firebase
*-- newTitle, newContent, newDue are bound to the edit fields and I expect them to refer to the selected document. But they refer to the last document only.

<v-card flat :class="'grey lighten-3 mb-1 border project ' + project.status" v-for="(project, i) in projectsArray" :key="i" :id="project.id">
  <div class="edit-list">
    <v-dialog v-model="dialog" persistent max-width="600" >
          <template v-slot:activator="{ on, attrs }">
            <v-btn v-bind="attrs" v-on="on" dark
              class="modifyProject small mx-1 grey v-btn v-btn--outlined v-btn--text theme--dark v-size--default" >
              <v-icon left>mdi-pencil</v-icon>
                edit
            </v-btn>
          </template>
          <v-card>
            <v-card-title class="text-h5">
              edit project #: {{project.id}}
            </v-card-title>
            <v-card-text>
              <v-text-field v-model="newTitle" placeholder="project title">{{project.title}}</v-text-field>
              <v-text-field v-model="newContent" placeholder="project content">{{project.content}}</v-text-field>
              <v-text-field v-model="newDue" placeholder="project due date">{{project.due}}</v-text-field>
              new title: {{newTitle}}
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="grey lighten-3" class="green--text" @click="modifyProject(project.id)" > Apply </v-btn>
              <v-btn color="grey lighten-3" class="red--text" @click="dialog = false" > Cancel </v-btn>
            </v-card-actions>
          </v-card>
    </v-dialog>
  </div>
</v-card>   

this is the document modify function:

async modifyProject(id){
      const selectedProject = doc(db, "Projects", id);
      await updateDoc(selectedProject, {
          title : this.newTitle,
          content : this.newContent,
          due : this.newDue
      });

(id) in the function always refer to the last document in the collection.
I want it to refer to the selected document.

[covik]

Code formatting is broken, use triple back ticks (`) to properly format the code.

[HanyTaha61]

I fixed it. Thanks