JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>



<div id="originalResult"><p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p></div>
<div id="modifiedResult"><p><strong>Lorem Ipsum</strong> is simply dummy text of <strong>the</strong> printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type test scrambled it to make a type  added</p><ul><li>test</li></ul></div>

<button id="btnCompareText" class="btn btn-primary">Compare Text</button>

<div id="originalText">
</div>

<div id="modifiedText">
</div>

JavaScript

$( function ()
    {
        $( "#btnCompareText" ).click( function ()
        {

            let originalString = $( "#originalResult" ).html();
            let modifiedString = $( "#modifiedResult" ).html();

            let dmp = new diff_match_patch();
            let diff = dmp.diff_main( originalString, modifiedString );

            let result = extractContents( diff );

            let html1 = $.parseHTML( result.OriginalDivContents );
            let html2 = $.parseHTML( result.ModifiedDivContents );
            
            html1 = html1.map( html => { return html.innerText } );
           	html2 = html2.map( html => { return html.innerText } );

           $( "#originalText" ).append( html1.join('') );
           $( "#modifiedText" ).append( html2.join('') );


        } );

        function extractContents( tokenizedArray )
        {

            let c = /&/g, d = /</g, e = />/g, f = /\n/g;
            let finalArray = new Array();
            for ( let g = 0; g < tokenizedArray.length; g++ )
            {
                let textType = tokenizedArray[g][0], value = tokenizedArray[g][1].replace( c, "&amp;" ).replace( d, "&lt;" ).replace( e, "&gt;" ).replace( f, "&para;<br>" );
                switch ( textType )
                {
                    case 1:
                        finalArray.push( { Index: g, TextType: 1, Value: `<span style="background:#e6ffe6;">${value}</span>` } );
                        break;
                    case -1:
                        finalArray.push( { Index: g, TextType: -1, Value: `<span style="background:#ffe6e6;">${value}</span>` } );
                        break;
                    case 0:
                        finalArray.push( { Index: g, TextType: 0, Value: `<span>${value}</span>` } );
                }
            }



            console.log( JSON.stringify( finalArray, undefined, 4 ) );

            let OriginalDivContents = "";
            for ( let i = 0; i < finalArray.length; i++ )
            {
    ...