How to call exact same function on two different html classes?

All am trying to do is, just incorporate a function which shorts the paragraphs and add “Show more” and “Show less” when show more is already opened. Its working on single html element but when i use it on another one, it just uses the two ones option to the first one.

Here is my function:

! function(e) {
    "object" == typeof module && "object" == typeof module.exports ? e(require("jquery"), window, document) : e(jQuery, window, document)
}(function(e, s, t, n) {
    e.fn.shorten = function(s) {
        "use strict";
        var n = {
            mode: 1,
            showChars: 100,
            minHideChars: 10,
            ellipsesText: "...",
            moreText: 'Show more',
            lessText: 'Show less',
            onLess: function() {},
            onMore: function() {},
            errMsg: null,
            force: !1
        };
        var more_button = '<button type="button" style="width: 100%;background-color: white;height: 30px;border-color: black;margin-top: 20px;margin-bottom: 20px;color: black;" class="btn btn-lg btn-primary"><span><span>Show more</span></span></button>';
        var less_button = '<button type="button" style="width: 100%;background-color: white;height: 30px;border-color: black;margin-top: 20px;margin-bottom: 20px;color: black;" class="btn btn-lg btn-primary"><span><span>Show less</span></span></button>'
        return s && e.extend(n, s), e(this).data("jquery.shorten") && !n.force ? !1 : (e(this).data("jquery.shorten", !0), e(t).off("click", ".morelink"), e(t).on({
            click: function() {
                var s = e(this);
                var zz = n.mode === 2 ? more_button : n.moreText;
                var zx = n.mode === 2 ? less_button : n.lessText;
                return s.hasClass("less") ? (s.removeClass("less"), s.html(zz), s.parent().prev().prev().show(), s.parent().prev().hide(0, function() {
                    n.onLess()
                })) : (s.addClass("less"), s.html(zx), s.parent().prev().prev().hide(), s.parent().prev().show(0, function() {
                    n.onMore()
                })), !1
            }
        }, ".morelink"), this.each(function() {
            var s = e(this),
                t = s.html().trim(),
                r = t.length,
                o = t.substr(n.showChars, r - n.showChars).indexOf(" "),
                i = n.showChars + o;
            if (r > i + n.minHideChars) {
                var l = t.substr(0, i);
                if (l.indexOf("<") >= 0) {
                    for (var a = !1, h = "", c = 0, f = [], u = null, d = 0, p = 0; i >= p; d++) {
                        if ("<" != t[d] || a || (a = !0, u = t.substring(d + 1, t.indexOf(">", d)), "/" == u[0] ? u != "/" + f[0] ? n.errMsg = "ERROR en HTML: the top of the stack should be the tag that closes" : f.shift() : "br" != u.toLowerCase() && f.unshift(u)), a && ">" == t[d] && (a = !1), a) h += t.charAt(d);
                        else if (i >= c) h += t.charAt(d), c++;
                        else if (f.length > 0) {
                            for (j = 0; j < f.length; j++) h += "</" + f[j] + ">";
                            break
                        }
                        p++
                    }
                    l = e("<div/>").html(h + '<span class="ellip">' + n.ellipsesText + "</span>").html()
                } else l += n.ellipsesText;
                var blur_style = (n.mode === 2) ? "-webkit-mask-image: linear-gradient(#fff,#fff,rgba(255,255,255,0));" : "";
                var _temp_button = n.mode === 2 ? more_button : n.moreText;
                var m = '<div class="shortcontent" style="'+ blur_style +'">' + l + '</div><div class="allcontent">' + t + '</div><span><a href="javascript://nop/" class="morelink" style="text-decoration: underline;color:black;">' + _temp_button + "</a></span>";
                s.html(m), s.find(".allcontent").hide(), e(".shortcontent > *:last", s).css("margin-bottom", 0)
            }
        }))
    }
});

And here is how i apply on html :

$('.overview-1477').shorten({
    showChars: 250,
    mode: 1,
    moreText: 'Show more',
    lessText: 'read less'
});
$('.course_content_2544').shorten({
    showChars: 600,
    mode: 2,
}); 

So when mode === 1 then it should show moreText and lessText but when mode === 2 then another design elements are added.

But when i use this on to call for two elements, both the elements work based on last configs.

So i need to tweak the code, to work on different elements but no idea where i have missed. Please help