JSFiddle - React, Tailwind, and code Playground

by tinhtn

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="text" name="one" value="60">
    </div>

    <div>
        <input type="text" name="two" value="70">
    </div>
    <div>
        <input class="inner" type="text" name="three" value="80">
    </div>


    <style>
        div {
            padding: 10px;
        }

        input {
            padding: 10 20px;
            line-height: 30px;
            font-size: 20px;
            ;
        }
    </style>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>


        $("input[type=text]").each(function () {
            var val = $(this).val();
            var html = "<span class='getvalue'>" + val + "</span>";
            $(this).parent().append(html);
        });

        $('input').keyup(function () {
            var val = $(this).val();
            $(this).val(numberWithCommas(val));
            $(this).next().text((numberWithCommas(val)));
        });

        function numberWithCommas(x) {
            var val = x.replace(/\D/g, '');
            console.log(val);
            var newVal = '';
            while (val.length > 3) {
                newVal += val.substr(0, 3) + '.';
                val = val.substr(3);
            }
            newVal += val;
            return newVal;

        }
    </script>
</body>

</html>