I’m fetching deliveries from Mysql with PHP and When the user clicks on the Accept button I want to show a form and if the user click Revision I want to show another form. I know how to this.
The problem is when there are multiple deliveries it stops working. because we cannot have multiple id with the same name. so I added the delivery id with the id name. but it still doesn’t work.
How can I solve this?
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <?php while ($delivery = mysqli_fetch_assoc($deliveries)) { ?> <button class="btn btn-primary w-md waves-effect waves-light mb-2 mr-3" id="accept_job_<?php echo $delivery['applicant_id']; ?>">Accept & Review Job</button> <button class="btn btn-light w-md waves-effect waves-light mb-2" id="request_revision_<?php echo $delivery['applicant_id']; ?>">Request Revision</button> <div class="review_seller mt-4" id="review_seller" style="display: none;"> <!-- ------------- Some Content ----------------- --> </div> <div class="revision_details mt-4" id="revision_details" style="display: none;"> <!-- ------------- Some Content ----------------- --> </div> <script> $(document).ready(function() { $('#accept_job_<?php echo $delivery['applicant_id']; ?>').click(function() { $('#review_seller').toggle(); $('#revision_details').hide(); }); $('#request_revision_<?php echo $delivery['applicant_id']; ?>').click(function() { $('#revision_details').toggle(); $('#review_seller').hide(); }); }); </script> <?php } ?>
Advertisement
Answer
You can combine .parent()
and .find()
to get the elements/row that you want to perform the methods toggle()
and hide()
on, the following is a working snippet, notice that I removed the ID and PHP code also I added a wrapping div with row
class:
$(document).ready(function() { $('.row .review_seller-btn').click(function() { $(this).parent().find('.review_seller').toggle(); $(this).parent().find('.revision_details').hide(); }); $('.row .revision_details-btn').click(function() { $(this).parent().find('.revision_details').toggle(); $(this).parent().find('.review_seller').hide(); }); });
.row { border: 1px solid #000; margin: 10px 0; padding: 10px; height: 200px; }
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <div class="row"> <button class="btn btn-primary w-md waves-effect waves-light mb-2 mr-3 review_seller-btn" id="accept_job_<?php echo $delivery['applicant_id']; ?>">Accept & Review Job</button> <button class="btn btn-light w-md waves-effect waves-light mb-2 revision_details-btn">Request Revision</button> <div class="review_seller mt-4" id="review_seller" style="display: none;"> review_seller </div> <div class="revision_details mt-4" id="revision_details" style="display: none;" > revision_details </div> </div> <div class="row"> <button class="btn btn-primary w-md waves-effect waves-light mb-2 mr-3 review_seller-btn" id="accept_job_<?php echo $delivery['applicant_id']; ?>">Accept & Review Job</button> <button class="btn btn-light w-md waves-effect waves-light mb-2 revision_details-btn">Request Revision</button> <div class="review_seller mt-4" id="review_seller" style="display: none;"> review_seller </div> <div class="revision_details mt-4" id="revision_details" style="display: none;" > revision_details </div> </div>