Load more not working jquery

Question

Problem

I tried to hide elements through jquery. However cannot found any reason why it is not working. I did how was showed in a example: https://jsfiddle.net/cse_tushar/6FzSb/ My site is where can be seen full problem: http://bookanytravel.com/hotels-en/ Don't judgr very strongly maybe I forgot to put some jquery plugin

Code Html:

<div class="row" id="mixitup">

    <ul id="myList">

        <li class="mix col-sm-6 col-xs-12 stars-<?=$stars?> <?=$emirate?> <?=strtolower(the_title('','',false))?>" data-priceorder="<?=$price_ord?>" data-ratingorder="96" data-starorder="<?=$stars?>">



            <div class="hotel_card">

                <div class="tour_img" style="background-image: url(<?=$photo[0]?>);"></div>

                <div class="price"><?=pll__('from')?> <strong><?=types_render_field("price", array("raw"=>"true"))?></strong></div>



                <div class="tour_info">

                    <h3 class="title"><a href="<?=get_permalink( $post->ID )?>"><? the_title(); ?></a></h3>

                    <div class="category"><?=types_render_field("address", array("raw"=>"true"))?></div>

                    <div class="stars">

                        <? $stars = types_render_field("stars", array("raw"=>"true"));

                        for ($i = 1; $i <= $stars; $i++): ?>

                            <span></span>

                        <? endfor; ?>

                    </div>

                </div>



                <div class="tour_links">

                    <hr>

                    <a data-remodal-target="modal_<?=$post->ID?>" href="#" class="book_tour"><?=pll__('Book the Hotel')?></a>

                    <a href="<?=get_permalink( $post->ID )?>" class="read_more"><?=pll__('Read More')?></a>

                    <hr>

                </div>

            </div>



        </li>

        <div class="col-xs-12"><div class="cd-fail-message alert alert-warning"><?=pll__('Not Found')?></div></div>



    </ul>

                    <!-- <div style="cursor:pointer; text-align: center;font-size: 25px;border: 1px solid;" id="loadMore">Load more</div> -->

Jquery

$(document).ready(function () {

                size_li = $("#myList li").size();

                x=3;

                $('#myList li:lt('+x+')').show();

                $('#loadMore').click(function () {

                    x= (x+5 <= size_li) ? x+5 : size_li;

                    $('#myList li:lt('+x+')').show();

                });

            });