<template>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-4 mb-4" v-for="subject in subjects.subject" :key="subject.subject_id">
                <div class="card w-200">
                    <div class="card-body">
                        <div class="card-header  text-center ">
                            <h4>{{subject.subject_name}}</h4>
                        </div>
                        <table class="table table-striped text-center table-bordereed">
                            <thead>
                                <tr>
                                    <th scope="col">Chapter Name</th>
                                    <th scope="col">Number of questions</th>
                                    <th scope="col">Remarks</th>
                                </tr>
                            </thead>
                                <tbody>
                                    <tr v-for="chapter in subjects.chapter" :key="chapter.chapter_id">
                                        <td v-if="subject.subject_id==chapter.subject_id">{{chapter.chapter_name}}</td>
                                        <td v-if="subject.subject_id==chapter.subject_id">0</td>
                                        <td v-if="subject.subject_id==chapter.subject_id">
                                            <div class="btn-group">
                                                <button class="btn btn-danger" @click="deleteChapter(chapter.chapter_id)">Delete</button>
                                                <button class="btn btn-primary">Edit</button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                        </table>
                    </div>
                    <div class="card-footer">
                        <div class="btn-group">
                            <button class="btn btn-delete text-center" @click="deleteSubject(subject.subject_id)">Delete</button>
                            <CreateChapter :id="subject.subject_id"/>
                        </div>
                    </div>
                </div>
            </div>

This is my SubjectCard component. It has multiple CreateChapter modal components as children to which I pass subject_id as a prop with a v-for loop.

But when I open a modal to try to add a chapter to a subject it always creates a chapter for the same subject.

<template>
    <div>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Create Chapter</button>
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">New Chapter</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="recipient-name" class="col-form-label">Chapter Name</label>
                    <input v-model="chapter_name" type="text" class="form-control" id="chapter-name">
                </div>
                <div class="mb-3">
                    <label for="message-text" class="col-form-label">Description</label>
                    <textarea v-model="description" class="form-control" id="message-text"></textarea>
                </div>
                <h2>{{ id }}</h2>
            </div>
            <button type="button" class="btn btn-primary"  data-bs-dismiss="modal" @click="addChapter">Save</button>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-primary"  data-bs-dismiss="modal" @click="addChapter">Save</button> -->
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
            </div>
        </div>
        </div>
        <!-- <div>
            <button @click="addChapter">click</button>
        </div> -->
    </div>

</template>

This is my Chapter modal which adds a new chapter for a given subject.

But right now it is adding chapters to the same subject each time.