How can I insert a comma into this box?

Question

How can I insert a comma , into this box?

I want to have Comma in this counter. I used the code from this website https://github.com/MikhaelGerbet/jquery-incremental-counter

I want to have commas according to the positions in the image.

$(".incremental-counter").incrementalCounter();

.incremental-counter .num {
    background: #f8f8f8 none repeat scroll 0 0;
    border: 1px solid #fff;
    border-radius: 4px;
    color: #00aae6;
    display: inline-block;
    height: 64px;
    line-height: 62px;
    margin: 0 4.5px;
    position: relative;
    text-align: center;
    top: -1px;
    width: 50px;
    font-size: 45px;
    font-size: 3.72625em;
    font-weight: 700;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
    font-family: "Open Sans",Arial,Helvetica,sans-serif;
}
.incremental-counter .num::before {
     background: #00aae6;
     content: "";
     display: block;
     height: 1px;
     left: -1px;
     margin: -0.5px 0 0;
     position: absolute;
     right: -1px;
     top: 50%;
     width: auto;
}

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

<div class="incremental-counter" data-value="1348257"></div>








<script>
/*
 Plugin Name: jQuery plugin incremental counter
 Plugin URI: https://github.com/MikhaelGerbet/jquery-incremental-counter
 Description: jQuery plugin incremental counter is a simple counter animated
 Author: GERBET Mikhael
 Author URI: https://github.com/MikhaelGerbet
 License: MIT
 */

(function($){
    $.fn.incrementalCounter = function(options){
        //default options
        var defauts = {
                "digits": 4
            },
            pad = function(n, width, z) {
                z = z || '0';
                n = n + '';
                return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
            },
            start = function(element){

                var current_value = parseInt($(element).data('current_value')),
                    end_value = parseInt($(element).data('end_value')),
                    current_speed = 20;

                if(end_value === 0) {
                    return false;
                }


                if (end_value - current_value < 5){
                    current_speed = 200;
                    current_value += 1;
                } else if(end_value - current_value < 15){
                    current_speed = 50;
                    current_value += 1
                } else if(end_value - current_value < 50){
                    current_speed = 25;
                    current_value += 3
                } else{
                    current_speed = 25;
                    current_value += parseInt((end_value - current_value)/24)
                }

                $(element).data({
                    current_value:current_value
                });

                if(current_speed){
                    setTimeout(function(){
                        display($(element),current_value);
                    },current_speed);
                }else{
                    display($(element),current_value);
                }
            },
            display = function(element,value){
                var padedNumber = pad(value, element.data('digits')),
                    exp = padedNumber.split(""),
                    end_value = $(element).data('end_value'),
                    nums = $(element).find('.num');
                $(exp).each(function(i,e){
                    $(nums[i]).text(exp[i]);
                });

                if(end_value != value){
                    start(element);
                }
            },
            //merge options
            options = $.extend(defauts, options);

        this.each(function(index, element){

            var default_digits = options.digits ,
                digits =  element.getAttribute('data-digits') ?  element.getAttribute('data-digits') : default_digits ,
                end_value = parseInt( element.getAttribute('data-value'));

            digits = digits === 'auto' || digits < String(end_value).length ? String(end_value).length : digits;

            //get value
            $(element).data({
                current_value : 0,
                end_value : end_value,
                digits : digits,
                current_speed : 0
            });

            //add number container
            for(var i=0 ; i < digits ; i++){
                $(element).append('<div class="num">0</div>');
            }

            start($(element));

        });
        return this;
    };
})(jQuery);</script>

Answer 1

        //add number container
        for(var i=0 ; i < digits ; i++){
            $(element).append('<div class="num">0</div>');
        }

This loop inserts one div element for each digit. If you wanted to insert real elements holding the commas between those, you would have to modify the actual plugin code.

Better option would be to use CSS pseudo elements to insert them. This implementation is already using the ::before pseudo element for the blue line, so using ::after will do the least "damage" to the already existing setup. You can use the selector .incremental-counter .num:nth-last-child(3n+1):not(:last-child)::after to insert the after elements into the correct elements - all you still need to do then, is position & format them appropriately.

.incremental-counter .num:not(:last-child) {
  margin-right: .25em; /* add a bit more space between the digits */
}
.incremental-counter .num:nth-last-child(3n+1):not(:last-child)::after {
  position: absolute;
  content: ",";
  font-size: .5em;
  left: calc(100% + .25em);
  bottom: -20%;
}

https://jsfiddle.net/cro8vyzn/2/