JSFiddle - React, Tailwind, and code Playground

HTML

<p>Here are all the emoticons and ways of writing them:<br /> 
            :-) :) =] =) :-( =( :[ :< ;-) ;) ;] *) :D =D XD BD 8D xD :O =O :-O =-O (6) (A) :'( :'-( :| :o) 8) 8-) (K) :-* (M)<br />
            They can even be together, no need of whitespaces inbetween: :)(M)
        </p>
        <p class="posted">Here are all the emoticons and ways of writing them:<br /> 
            :-) :) =] =) :-( =( :[ :< ;-) ;) ;] *) :D =D XD BD 8D xD :O =O :-O =-O (6) (A) :'( :'-( :| :o) 8) 8-) (K) :-* (M)<br />
            They can even be together, no need of whitespaces inbetween: :)(M)
        </p>

<p class="posted" style="background-color:#ffffff;"><span>Problem is here when i write multiple smile emoji then just one emoji working</span> <br/>
  :):):):)
</p>

CSS

.emoticonimg{
/*border: 1px solid #000000;*/
vertical-align:bottom;
}
span {
  font-weight:bold;
  color:red;
}

JavaScript

jQuery.fn.emoticons = function(icon_folder) {
    /* emoticons is the folder where the emoticons are stored*/
    var icon_folder = icon_folder || "emoticons";
    //var settings = jQuery.extend({emoticons: "emoticons"}, options);
    /* keys are the emoticons
     * values are the ways of writing the emoticon
     *
     * for each emoticons should be an image with filename
     * 'face-emoticon.png'
     * so for example, if we want to add a cow emoticon
     * we add "cow" : Array("(C)") to emotes
     * and an image called 'face-cow.png' under the emoticons folder   
     */
    var emotes = {"smile": Array(":-)",":)","=]","=)"),
                  "sad": Array(":-(","=(",":[",":&lt;"),
                  "wink": Array(";-)",";)",";]","*)"),
                  "grin": Array(":D","=D","XD","BD","8D","xD"),
                  "surprise": Array(":O","=O",":-O","=-O"),
                  "devilish": Array("(6)"),
                  "angel": Array("(A)"),
                  "crying": Array(":'(",":'-("),
                  "plain": Array(":|"),
                  "smile-big": Array(":o)"),
                  "glasses": Array("8)","8-)"),
                  "kiss": Array("(K)",":-*"),
                  "monkey": Array("(M)")};
                  
    /* Replaces all ocurrences of emoticons in the given html with images
     */
    function emoticons(html){
        for(var emoticon in emotes){
            for(var i = 0; i < emotes[emoticon].length; i++){
                /* css class of images is emoticonimg for styling them*/
                html = html.replace(emotes[emoticon][i],"<img src=\"http://www.oobenn.com/"+icon_folder+"/face-"+emoticon+".png\" class=\"emoticonimg\" alt=\""+emotes[emoticon][i]+"\"/>","g");
            }
        }
        return html;
    }
    return this.each(function(){
        $(this).html(emoticons($(this).html()));
    });
};

$(document).ready(function(){
    $(".posted").emoticons();
});