Jquery click event doesn’t works with multiple buttons

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 } ?>

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>

Advertisement

Answer