Jquery click event doesn't works with multiple buttons

Question

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 1

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>

Answer 2

You can hide content for all feed then display related content.

            $(document).ready(function () {
                $("form").submit(function () {
                    return false;
                });
                $('.newsFeedButtons .btn').on('click', function () {
                    $('.content-feed').hide();
                    $elem=$(this);
                    btnId=$elem.attr('id');
                    switch (btnId) {
                        case 'searchbtn':
                            $('#newsResult').show();
                            break;
                        case 'twitterbtn':
                            $('#twitterDIV').show();
                            break;
                    }
                });
            });

            .hide {
                display: none;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <div class="newsFeedButtons">
            <button class="btn" id="searchbtn">Search</button>
            <button class="btn" id="cryptobtn">Crypto</button>
            <button class="btn" id="twitterbtn">Twitter</button>
        </div>

        <div id="twitterDIV" class="content-feed" style="display: none;">
            <a class="twitter-timeline" data-width="550" data- 
               height="400" href="https://twitter.com/Bitcoin? 
               ref_src=twsrc%5Etfw">Tweets by Bitcoin</a>
            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>

        <div class="row">
            <div id="newsResult" class="content-feed">Text</div>
        </div>