Ajax call not working on Magento_Wishlist

Question

I have created a controller for products added wishlist or not, if available include class name,

Controller:

<?php

namespace Vendor\Mymodule\Controller\Index;

class Wishlist extends \Magento\Framework\App\Action\Action {

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Wishlist\Helper\Data $wishlistHelper,
        \Magento\Framework\Controller\Result\JsonFactory $jsonFactory
        ) {
            parent::__construct($context);
            $this->wishlistHelper = $wishlistHelper;
            $this->jsonFactory = $jsonFactory;
    }

    public function execute() {
        $result = $this->jsonFactory->create();
        $data = $this->wishlistHelper->getWishlistItemCollection()->getData();

        return $result->setData(['status' => 200, 'items' => $data]);
    }
}

The controller working, i want to include class using ajax

Path: app\design\frontend\Zero\my_theme\Magento_Wishlist\templates\catalog\product\list\addto\wishlist.phtml

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var Magento\Wishlist\Block\Catalog\Product\ProductList\Item\AddTo\Wishlist $block */
?>
<?php if ($block->getWishlistHelper()->isAllow()) : ?>
    <div class="product-id-<?php echo $block->getProduct()->getId();?>">

    <a href="#"
       class="action towishlist"
       title="<?= $block->escapeHtmlAttr(__('Add to Wish List')) ?>"
       aria-label="<?= $block->escapeHtmlAttr(__('Add to Wish List')) ?>"
       data-post='<?= /* @noEscape */ $block->getAddToWishlistParams($block->getProduct()) ?>'
       data-action="add-to-wishlist"
       role="button">
       <img class="whislist-icon" src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/whislist.png'); ?>" />
        <span><?= $block->escapeHtml(__('Add to Wish List')) ?></span>
    </a>
</div>
<?php endif; ?>

<script>
require(['jquery'], function($){
jQuery.ajax({
url: '<?php echo $this->getUrl('customwishlist/index/wishlist') ?>',
method: 'get',
dataType: 'json',
success: function(data) {
var wislistAddesCheckData = data;
var itemLenth = wislistAddesCheckData.items.length;
for(i=0;i<itemLenth; i++){
var wislistAddedProductId = wislistAddesCheckData.items[i].product_id;
$(".product-id"+wislistAddedProductId).addClass('in-wishlist');
}
}
});
});
</script>

The script not functioning, the class not included, how to included that, my condition if products added to the wishlist should include class ,

<div class="product-id-<?php echo $block->getProduct()->getId();?>">

Answer 1

Assuming you're getting product_id from ajax call then I think there is a minor problem in your jquery. It should be $(".product-id-"+wislistAddedProductId).addClass('in-wishlist') not $(".product-id"+wislistAddedProductId).addClass('in-wishlist'). Check your div class name. Try below :

<script>
require(['jquery'], function($){
jQuery.ajax({
url: '<?php echo $this->getUrl('customwishlist/index/wishlist') ?>',
method: 'get',
dataType: 'json',
success: function(data) {
var wislistAddesCheckData = data;
var itemLenth = wislistAddesCheckData.items.length;
for(i=0;i<itemLenth; i++){
var wislistAddedProductId = wislistAddesCheckData.items[i].product_id;
$(".product-id-"+wislistAddedProductId).addClass('in-wishlist');
}
}
});
});
</script>