How to provide scrollbar features on dynamic HTML using jQuery?

I am having two div tags. One is by default in the HTML template and one is dynamic coming from jQuery.

<div id="dynamic_notification"></div>

<div class="wishlist-dropsec" id="message_dropsec">
        <span><i class="fa fa-envelope"></i><strong>4</strong></span>
        <div class="wishlist-dropdown" id="message_dropdown">
            <ul class="scrollbar1">
                <li>
                    <div class="xxx">
                        
                    </div>
                </li>
            </ul>
        </div>
    </div>

and following is the code where I am appending dynamic div tag on HTML template.

    var html = [];
    html.push('<div class="wishlist-dropsec" id="notification_dropsec">')
    html.push('<span><i class="fa fa-bell"></i><strong>'+count+'</strong></span>');
    html.push('<div class="wishlist-dropdown" id="notification_dropdown"><ul class="scrollbar">');
    html.push('<li><div class="xxx">');
    //some code
    html.push('</div></li>');
    html.push('</ul></div></div>');
    $("#dynamic_notification").html(html.join(''));

and in the bottom on the html page, I am having this jQuery code,

<script type="text/javascript">
    $("#dynamic_notification").on("click", function(e)  {
         var e1 = document.querySelector('.scrollbar');
         console.log("e1",e1);
         SimpleScrollbar.initEl(e1);
    });

    $("#message_dropsec").on("click", function(e)  {
         var e2 = document.querySelector('.scrollbar1');
         console.log("e2",e2);
         SimpleScrollbar.initEl(e2);

    });
</script>

Following is the jQuery code for the functionalities of scrollbar which popup when we click a button on the navigation bar.

(function(e, d) {
    function g(a) {
        a.hasOwnProperty("data-simple-scrollbar") || Object.defineProperty(a, "data-simple-scrollbar", new SimpleScrollbar(a))
    }

    function l(a, b) {
        function c(a) {
            var c = a.pageY - e;
            e = a.pageY;
            h(function() {
                b.el.scrollTop += c / b.scrollRatio
            })
        }

        function f() {
            a.classList.remove("ss-grabbed");
            d.body.classList.remove("ss-grabbed");
            d.removeEventListener("mousemove", c);
            d.removeEventListener("mouseup", f)
        }
        var e;
        a.addEventListener("mousedown", function(b) {
            e = b.pageY;
            a.classList.add("ss-grabbed");
            d.body.classList.add("ss-grabbed");
            d.addEventListener("mousemove", c);
            d.addEventListener("mouseup", f);
            return !1
        })
    }

    function f(a) {
        this.target = a;
        this.direction = window.getComputedStyle(this.target).direction;
        this.bar = '<div class="ss-scroll">';
        this.wrapper = d.createElement("div");
        this.wrapper.setAttribute("class", "ss-wrapper");
        this.el = d.createElement("div");
        this.el.setAttribute("class", "ss-content");
        "rtl" === this.direction && this.el.classList.add("rtl");
        for (this.wrapper.appendChild(this.el); this.target.firstChild;) this.el.appendChild(this.target.firstChild);
        this.target.appendChild(this.wrapper);
        this.target.insertAdjacentHTML("beforeend", this.bar);
        this.bar = this.target.lastChild;
        l(this.bar, this);
        this.moveBar();
        this.el.addEventListener("scroll", this.moveBar.bind(this));
        this.el.addEventListener("mouseenter", this.moveBar.bind(this));
        this.target.classList.add("ss-container");
        var b = window.getComputedStyle(a);
        "0px" === b.height && "0px" !== b["max-height"] && (a.style.height = b["max-height"])
    }

    function k() {
        for (var a = d.querySelectorAll("*[ss-container]"), b = 0; b < a.length; b++) g(a[b])
    }
    var h = e.requestAnimationFrame || e.setImmediate || function(a) {
        return setTimeout(a, 0)
    };
    f.prototype = {
        moveBar: function(a) {
            var b = this.el.scrollHeight,
                c = this;
            this.scrollRatio = this.el.clientHeight / b;
            var d = "rtl" === c.direction ? c.target.clientWidth - c.bar.clientWidth + 18 : -1 * (c.target.clientWidth - c.bar.clientWidth);
            h(function() {
                1 <= c.scrollRatio ? c.bar.classList.add("ss-hidden") : (c.bar.classList.remove("ss-hidden"), c.bar.style.cssText = "height:" + Math.max(100 * c.scrollRatio, 10) + "%; top:" + c.el.scrollTop / b * 100 + "%;right:" +
                    d + "px;")
            })
        }
    };
    d.addEventListener("DOMContentLoaded", k);
    f.initEl = g;
    f.initAll = k;
    e.SimpleScrollbar = f
})(window, document)

The problem that I am facing is the functionalities working fine with the by default HTML code but not working with dynamic HTML code coming from jQuery.

Please help me out. I am banging my head since last week. Thanks alot.