JSFiddle - React, Tailwind, and code Playground

by MyNameIsCode

HTML

<div id="wrapper" class="homepage_main">
    <div id="sidebar" class="sidebar-container pull-left s-shadow">
        <div class="home_slides hide" data-id="Colleague"></div>
    </div>
    <div id="primary" class="split-container pull-right">
        <div class="home_slides hide" data-id="Colleague">
            <div id="suggested_colleague" class="create-event modal hide fade">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                     <h5>List of colleague suggestion</h5>

                </div>
                <div class="modal-body">
                    <div class="coll_modal">
                        <p>You have <strong data-id="SuggestCount">0</strong> colleague suggestion</p>
                        <div class="coll_panel_container">
                            <div class="request_items">
                                <div class="coll_panel_content hide" data-id="Clonable">
                                    <img src="#" /> <a href="#" class="pull-left" data-id="FullName"></a>

                                    <br> <a href="#" class="coll_item1 accept_request">Add</a>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="gif_loading hide">
                        <img src="#" />
                        <br /> <span class="loading_font">Please wait..</span>

                    </div>
                    <div class="pagination pagination-right hide">
                        <ul>
                            <li class="jp_first"><a href="#">&laquo;&laquo;</a>

                            </li>
                            <li class="jp_prev"><a href="#">&laquo;</a>

                            </li>
                            <li class="jp_next"><a href="#">&raquo;</a>

                            </li>
                            <li...

JavaScript

$(function () {

    var base = {
        $wrapper: $('.homepage_main')
    };

    base.$main = base.$wrapper.find('#primary').find('.home_slides').closest('[data-id="Colleague"]');
    base.$panel = base.$wrapper.find('#sidebar').find('.home_slides').closest('[data-id="Colleague"]');

    base.Template = {
        $img: function () {
            return $('img');
        }
    };

    base.Modal.$modalInterrupt: $('#searching_interruption');

    base.Modal.Suggestion.$self = $('#suggested_colleague');

    base.Modal.Suggestion = {
        $loading: base.Modal.Suggestion.$self.find('.gif_loading'),
        $paging: base.Modal.Suggestion.$self.find('.pagination'),
        $itemContainer: base.Modal.Suggestion.$self.find('.request_items'),
        $itemClone: base.Modal.Suggestion.$itemContainer.find('[data-id="Clonable"]').clone().removeAttr('data-id').removeClass('hide'),
        $lblCount: base.Modal.Suggestion.$self.find('[data-id="SuggestCount"]'),
        $listItems: function () {
            return base.Modal.Suggestion.$itemContainer.find('.coll_panel_content:not([data-id="Clonable"])');
        }
    };

});