compare sidebar data-bind is not getting data of comapre product

i want to add product from dropdown to compare list but somehow product data is not showing like picture and name (i have already added pluging for product image), might be data-bind=”scope: ‘compareProducts'” is not getting data.

sidebar.phtml

<style>
ul.compare-toggle.compare-dd-active {
    display: block;
}

ul.compare-toggle.compare-dd-hidden {
    display: none;
}

get(MagentoFrameworkUrlInterface::class);
$currentUrl = $urlInterface->getCurrentUrl();

$helper = $this->helper(‘CodazonAjaxCartProHelperData’);
$compareProducts = $helper->getCompareProducts();
if ($compareProducts[‘count’] == 1) {
$product = $helper->getProductById($helper->getFirstCompareProductId($compareProducts[‘items’]));
$productCollection = $helper->getproductCollection($product->getCategoryIds());
} else {
$productCollection = $helper->getproductCollection();
}
$baseUrl = $block->getUrl();
?>

escapeHtml(__(‘COMPARE’)) ?>

        <!-- <div class="block-content no-display" aria-labelledby="block-compare-heading" data-bind="css: {'no-display': !compareProducts().count}"> -->
        <div class="compare-wrapper">
            <ol id="compare-items-dummy" class="product-items product-items-names">
                <li class="product-item">
                    <div class="comprare-product-box product-square-1">
                        <strong class="product-item-name add-compare-product">
                            Add product
                        </strong>
                    </div>
                </li>
                <li class="product-item">
                    <div class="comprare-product-box product-square-2">
                        <strong class="product-item-name add-compare-product">
                            Add product
                        </strong>
                    </div>
                </li>
                <li class="product-item">
                    <div class="comprare-product-box product-square-3">
                        <strong class="product-item-name add-compare-product">
                            Add product
                        </strong>
                    </div>
                </li>
            </ol>
            <div class="block-content no-display" aria-labelledby="block-compare-heading" data-bind="css: {'no-display': !compareProducts().count}">
                <ol id="compare-items" class="product-items product-items-names" data-bind="foreach: compareProducts().items">
                    <li class="product-item">
                        <div class="comprare-product-box">
                            <input type="hidden" class="compare-item-id" data-bind="value: id" />
                            <img data-bind="attr: {'src' : image_src}" alt="">
                            <strong class="product-item-name">
                                <a data-bind="attr: {href: product_url}, html: name" class="product-item-link"></a>
                            </strong>
                            <a href="#" data-bind="attr: {'data-post': remove_url}" title="<?= $block->escapeHtmlAttr(__('Remove This Item')) ?>" id="compare-delete-one" class="action delete">
                                <span><?= $block->escapeHtml(__('Remove This Item')) ?></span>
                            </a>
                        </div>
                    </li>
                </ol>
            </div>

            <div class="actions-toolbar">
                <div class="primary">
                    <!-- <a data-bind="attr: {'href': compareProducts().listUrl}" class="action compare primary"><span><?= $block->escapeHtml(__('Compare')) ?></span></a> -->
                    <a href="<?php echo $baseUrl; ?>catalog/product_compare/" class="action compare primary"><span><?= $block->escapeHtml(__('Compare')) ?></span></a>
                </div>
                <div class="secondary">
                    <!-- <a id="compare-clear-all" href="#" class="action clear" data-post="<?= $block->escapeHtml($this->helper(MagentoCatalogHelperProductCompare::class)->getPostDataClearList()) ?>">
                        <span><?= $block->escapeHtml(__('Clear All')) ?></span>
                    </a> -->
                    <a id="compare-clear-all" href="#" class="action clear">
                        <span><?= $block->escapeHtml(__('Clear All')) ?></span>
                    </a>
                </div>
                <!-- <div class="all-products" id="form-key">
                    <?php echo $this->getBlockHtml('formkey'); ?>
                    <div id="compare-product-data" class="compare-product-data select-dropdown">Please Select</div>
                    <ul class="compare-toggle">
                        <div class="compare-search">
                            <input id="compare-search-bar" type="text" placeholder="Search..">
                        </div>
                        <?php foreach ($productCollection as $product) : ?>
                            <li class="product-list" value="<?php echo $product['id']; ?>"><?php echo $product['name']; ?></li>
                        <?php endforeach; ?>
                    </ul>
                </div> -->
            </div>
        </div>
        <!-- </div> -->

        <!-- <div class="empty"><?= $block->escapeHtml(__('You have no items to compare.')) ?></div> -->
    </div>
    <div class="all-products" id="form-key">
        <?php echo $this->getBlockHtml('formkey'); ?>
        <div id="compare-product-data" class="compare-product-data select-dropdown">Please Select Product</div>
        <ul class="compare-toggle">
            <div class="compare-search">
                <input id="compare-search-bar" type="text" placeholder="Search..">
            </div>
            <?php foreach ($productCollection as $product) : ?>
                <li class="product-list" value="<?php echo $product['id']; ?>"><?php echo $product['name']; ?></li>
            <?php endforeach; ?>
        </ul>
    </div>
    <script type="text/x-magento-init">
        {"[data-role=compare-products-sidebar]": {"Magento_Ui/js/core/app": <?= /* @noEscape */ $block->getJsLayout() ?>}}
    </script>
</div>

require(
[
‘jquery’,
‘Magento_Customer/js/customer-data’
],
function($, customerData) {
‘use strict’;
customerData.reload(‘compare-products’);
$(document).ready(function() {
console.log(customerData);
$(“.compare-toggle”).addClass(“compare-dd-hidden”);
$(document).on(“click”, “.all-products #compare-product-data”, function() {
if ($(“.compare-toggle”).hasClass(“compare-dd-active”)) {
$(“.compare-toggle”).removeClass(“compare-dd-active”);
$(“.compare-toggle”).addClass(“compare-dd-hidden”);
} else {
$(“.compare-toggle”).addClass(“compare-dd-active”);
$(“.compare-toggle”).removeClass(“compare-dd-hidden”);
}
});

jQuery(‘.block.block-compare’).click(function() {
$(“.compare-toggle”).removeClass(“compare-dd-active”);
$(“.compare-toggle”).addClass(“compare-dd-hidden”);
});

$(document).on(“keyup”,”#compare-search-bar”, function() {
var value = $(this).val().toLowerCase();
$(“.compare-toggle li”).filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});

$(document).on(“click”, “.add-compare-product”, function() {
$(“.all-products #compare-product-data”).trigger(“click”);
});

$(“#compare-footer-trigger”).click(function() {
setToggleActive();
addProductToCompare();
clearAll();
});

function clearAll() {
var baseUrl = “getUrl(); ?>”;
$(“.secondary #compare-clear-all”).on(‘click’, function() {
$.ajax({
cache: false,
url: baseUrl + ‘ajaxpost/product_compare/clear’,
type: “POST”,
showLoader: true,
dataType: ‘json’,
complete: function(response) {
var catProData = response.responseJSON.compare_category_product;
var catProHtml = ”;
Array.prototype.forEach.call(catProData, child => {
catProHtml += ” + child.name + ”;
});

$(“.compare-toggle”).html(catProHtml);
},
error: function(xhr, status, errorThrown) {
console.log(‘Related Products Ajax Error: ‘ + errorThrown);
}
});
});
}

function setToggleActive() {
$(‘#compare-footer-trigger’).toggleClass(‘active’);
$(‘#compare-data’).slideToggle(300);
}

function addProductToCompare() {
$(document).on(“click”, “li.product-list”, function() {
var product_id = $(this).attr(“value”);
var baseUrl = “getUrl(); ?>”;
var form_key = $(“input[name*=’form_key’]”).val();

$.ajax({
cache: false,
url: baseUrl + ‘ajaxpost/product_compare/add’,
showLoader: true,
data: {
product: product_id,
form_key: form_key
},
type: “POST”,
dataType: ‘json’,
complete: function(response) {
var catProData = response.responseJSON.compare_category_product;

var catProHtml = ”;
Array.prototype.forEach.call(catProData, child => {
catProHtml += ” + child.name + ”;
});
$(“.compare-toggle”).html(catProHtml);
$(“.all-products #compare-product-data”).trigger(“click”);
},
error: function(xhr, status, errorThrown) {
console.log(‘Related Products Ajax Error: ‘ + errorThrown);
}
});
});
}
});
});