单击按钮时将数据获取到模态，具有相同 ID 的按钮

Question

场景- 我有一个包含工作列表的页面，每个单独的工作列表都有一个名为申请的按钮。单击它时会弹出一个模式，但是该模式没有关于用户想要申请哪个工作的上下文，所以我想以某种方式获取发布到模式的工作的 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 %}