Magento2.4.2 Show review form and list on different location on product page

Question

I'm showing the review tab on different locations using the following code, form is showing but the review list is not showing.

<?php
$layout = $block->getLayout();
?>
<div class="product_review"> 
      <div class="col-sm-12 col-md-12" id="preview">
          <?= /* @noEscape */ $layout->renderElement('reviews.tab') ?>
      </div>   
</div>

I tried to adjust the JS but it's not working properly.

Answer 1

try it like this

<?php echo $block->getReviewsSummaryHtml($_product,"sort",true); ?>

let me know if you need any more help

Answer 2

Since review list is updating via Ajax therefore I have maked as follow:

<div class="product_review"> 
     <div class="col-sm-12 col-md-12" id="previewlist"></div>
      <div class="col-sm-12 col-md-12">
          <?= /* @noEscape */ $layout->renderElement('reviews.tab') ?>
      </div>   

</div>

process-reviews.js JS changes as follow:

define([
    'jquery'
], function ($) {
    'use strict';

    /**
     * @param {String} url
     * @param {*} fromPages
     */
    function processReviews(url, fromPages) {
        $.ajax({
            url: url,
            cache: true,
            dataType: 'html',
            showLoader: false,
            loaderContext: $('.product.data.items')
        }).done(function (data) {            
            $('#previewlist').html(data).trigger('contentUpdated');
            $('[data-role="product-review"] .pages a').each(function (index, element) {
                $(element).click(function (event) { //eslint-disable-line max-nested-callbacks
                    processReviews($(element).attr('href'), true);
                    event.preventDefault();
                });
            });
        }).complete(function () {
            if (fromPages == true) { //eslint-disable-line eqeqeq
                $('html, body').animate({
                    scrollTop: $('#reviews').offset().top - 50
                }, 300);
            }
        });
    }

    return function (config) {
        processReviews(config.productReviewUrl);
        $(function () {
            $('.product-info-main .reviews-actions a').click(function (event) {
                var anchor, addReviewBlock;

                event.preventDefault();
                anchor = $(this).attr('href').replace(/^.*?(#|$)/, '');
                addReviewBlock = $('#previewlist');
                $('html, body').animate({
                        scrollTop: addReviewBlock.offset().top - 50
                }, 300);

            });
        });
    };
});