JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
    <head>
        <meta charset = "utf-8">
        <meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1">
        <title>XY Analytics</title>
        <meta name = "description" content = "">
        <meta name = "viewport" content = "width=device-width">
        <script type = "text/javascript" src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="test_div">test</div>
        <script>
            Init();
            function Init(){
                if(typeof jQuery == 'undefined')
                {
                    return setTimeout(Init,100);
                }
                $(document).ready(function(){
                    var elem = $("#test_div").data("test_data","saved data").click(function() {
                        alert(elem.data("test_data"))
                    });
                });
            }
        </script>
        <script>
            var elem = document.createElement('script');elem.type = 'text/javascript';elem.async = true;
            elem.src = '//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js';
            var ssc = document.getElementsByTagName('script')[0];ssc.parentNode.insertBefore(elem, ssc);
        </script>
    </body>
</html>