JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper_update">
                
                <ul class="book">                    
                    <li><span class="text_bold">Greenflux</span></li>
                    <li><span class="clickme">Meer</span></li>
                    <li>1: Jan</li>
                    <li>2: Jan</li>
                    <li>3: Jan</li>
                    <li>4: Jan</li>
                    <li>5: Jan</li>
                    <li>6: Jan</li>
                    <li>7: Jan</li>
                    <li>8: Jan</li>
                    <li>9: Jan</li>
                    <li><span class="clickme_close_x">Minder</span></li>
                </ul>
                
            </div>
    
            <div class="wrapper_update">
                <ul class="book">    
                    <li><span class="text_bold">Greenflux</span></li>
                    <li class="clickme"><span>Meer</span></li>
                    <li>1: Jan</li>
                    <li>2: Jan</li>
                    <li>3: Jan</li>
                    <li>4: Jan</li>
                    <li>5: Jan</li>
                    <li>6: Jan</li>
                    <li>7: Jan</li>
                    <li>8: Jan</li>
                    <li>9: Jan</li>
                    <li>10: Jan</li>
                    <li>11: Jan</li>
                    <li>12: Jan</li>
                    <li>13: Jan</li>
                    <li>14: Jan</li>
                    <li>15: Jan</li>
                    <li>16: Jan</li>
                    <li>17: Jan</li>
                    <li>18: Jan</li>
                    <li><span class="clickme_close_x">Minder</span></li>
                </ul>
            </div>
                
            <div class="wrapper_update">
                <ul class="book">    
                    <li><span class="text_bold">Greenflux</span></li>
                    <li class="clickme"><span>Meer</span></li>
                    <li>1: Jan</li>
                    <li>2: Jan</li>
                   ...

CSS

.float_right{
            float:right;
        }
        
        .wrapper_update{
            margin-left:40px;
            width: 170px;
            margin-top:40px;
            border:1px solid black;
            padding:20px 20px 20px 20px;
        }
        
            .wrapper_update ul{
                height: 82px;
                overflow:hidden;
            }
            
        .clickme,
        .clickme_close,
        .clickme_close_x{
            cursor:pointer;
        }
        
          div { color:blue; }
            span { color:red; }
                b { font-weight:bolder; }

JavaScript

jQuery(document).ready(function() {
    
// Start Toggle Extend Compitition overview
    // Search height of the ul
        var $container = $('.wrapper_update');
        
        var currentHeight = $('.book').css('height');
            $('.book').css('height','auto');
        var animateHeight = $('.book').css('height');
            $('.book').css('height', currentHeight);
            
        // Voert actie uit
            
            $container.delegate('.clickme', "click", function() {            
        
            // Toggle class
        
                var $view = $(this).closest('.clickme').toggleClass('clickme_close');
                $('.clickme_close').not($view).replaceWith('<span class="clickme">Meer</span>');
                
            // End class
                                        
                var $view = $(this).closest(".wrapper_update").find(".book").animate({height: animateHeight}, 500);
                    $container.find('.book').not($view).animate({ height: "82px"}, 500);
                var $view = $(this).closest('.clickme').replaceWith('<span class="clickme_close">Minder</span>');
                    
            });
// End Toggle Extend Compitition overview

// Begin Toggle Hide functie off the Compitition overview by closing it                
            $container.delegate('.clickme_close', 'click', function() {        
                var $view = $(this).closest('.wrapper_update').find('.book').animate({height: '82px'}, 500);                        
                var $view = $(this).closest('.clickme_close').replaceWith('<span class="clickme">Meer</span>');                            
            });
// End Toggle Hide functie off the Compitition overview by closing it

            $container.delegate('.clickme_close_x', 'click', function() {                
            var $view = $(this).prev(".wrapper_update")

                    $container.find('.book').not($view).animate({height: "82px"}, 500);               ...