單擊按鈕時將數據獲取到模態，按鈕具有相同的 ID

Question

場景 - 我有一個頁面，上面有工作列表，每個單獨的工作列表都有一個名為 apply 的按鈕。 單擊它時會彈出一個模態，但是該模態沒有關於用戶想要申請哪個工作的上下文，所以我想以某種方式將職位發布的 ID 獲取到該模態。

問題 - 按鈕是按程序生成的並且具有相同的 ID。 因此，由於某種原因，使用 javascript 來捕獲onclick事件導致它只獲取第一個按鈕的data-id 。

{% for vacancy in vacancies %}
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Job
                                Title - {{ vacancy.job_title }}
                            </h5>
        <strong><p>Description </p></strong>
        <p class="card-text">{{ vacancy.job_description }}</p>
    </div>
    <button id="openmodal" data-id="{{ vacancy.id }}" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Apply
    </button>
</div>
{% endfor %}

<div class="modal-body">
    <form action="" class="customer-input" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="row">
            <div class="form-group col-lg-6">
                <label for="fullName">Full Name</label>
                <br>
                <input name="full-name" type="text" placeholder="Full Name" required="required">
            </div>
            <div class="form-group col-lg-6">
                <label for="email">Email</label>
                <br>
                <input type="email" name="email" placeholder="Email" required="required">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Job Role</label>
                    <br>
                    <select class="job-role" name="job-role">
                        <option value="python-developer">Python Developer</option>
                        <option value="fullstack-developer">Full Stack Developer</option>
                    </select>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Your Resume</label>
                    <br>
                    <input type="file" name="resume" accept=".pdf, .docx, .doc, .odt, .ott">
                </div>
            </div>
        </div>
        <div class="text-center">
            <button type="submit" class="login-res-btn">Apply!</button>
        </div>
    </form>
</div>

Answer 1

這不是正確的解決方案，必須有更好的解決方案，但我很絕望，我也會按程序生成模態。

{% for vacancy in vacancies %}
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Job
                                    Title - {{ vacancy.job_title }}
                                </h5>
                                <strong><p>Description </p></strong>
                                <p class="card-text">{{ vacancy.job_description }}</p>
                            </div>
                            <button data-id="{{ vacancy.id }}" type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#modal{{ vacancy.id }}">
                                Apply
                            </button>
                        </div>
                        <br>
                        <br>
                        <div class="modal text-center" id="modal{{ vacancy.id }}">
                            <div class="modal-dialog">
                                <div class="modal-content">

                                    <!-- Modal Header -->
                                    <div class="modal-header">
                                        <h4 class="modal-title">Apply for the desired role</h4>
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    </div>

                                    <!-- Modal body -->
                                    <div class="modal-body">
                                        <form action="" class="customer-input" method="post"
                                              enctype="multipart/form-data">
                                            {% csrf_token %}
                                            <div class="row">
                                                <div class="form-group col-lg-6">
                                                    <label for="fullName">Full Name</label><br>
                                                    <input name="full-name" type="text" placeholder="Full Name"
                                                           required="required">
                                                </div>
                                                <div class="form-group col-lg-6">
                                                    <label for="email">Email</label><br>
                                                    <input type="email" name="email" placeholder="Email"
                                                           required="required">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label>Your Resume</label><br>
                                                        <input type="file" name="resume"
                                                               accept=".pdf, .docx, .doc, .odt, .ott">
                                                        <input type="text" value="{{ vacancy.id }}" name="job-title" readonly="readonly" hidden="hidden">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-center">
                                                <button type="submit" class="login-res-btn">Apply!</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}