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 $wrapper = $('.homepage_main'),
        base = {
            $main: $wrapper.find('#primary').find('.home_slides').closest('[data-id="Colleague"]'),
            $panel: $wrapper.find('#sidebar').find('.home_slides').closest('[data-id="Colleague"]'),

            Template: {
                $img: function () {
                    return $('img');
                }
            },

            Modal: {
                $modalInterrupt: $('#searching_interruption'),
                Suggestion: {
                    $self: $('#suggested_colleague'),
                    $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"])');
                    }
                }
            }
        };
});