JSFiddle - React, Tailwind, and code Playground

by Gereltod Gotsbayar

HTML

<input type="text" id="sms-sender" />
<input type="text" id="sms-sender-clone" />
<span id="sms-sender-error">x</span>

<div id="number-div"></div>

CSS

#sms-sender,#sms-sender-clone{
    padding: 3px 5px;
    color: #666;
    width: 180px;
    position: absolute;
}
#sms-sender-error{
    color: #ff0000;
    position: absolute;
    left: 210px;
    visibility: hidden;
}

div#number-div {
    margin-top: 50px;
}
div.numbers {
    margin-top: 5px;
    color: #202272;
    font: normal 14px Helvetica;
    width: 100px;
    background-color: #4efefe;
    padding: 3px 5px;
}

JavaScript

var lastGood = '';

$("#sms-sender").bind('keyup', function(e) {
    if (!$('#sms-sender').val().match(/^([97]\d{7},){0,2}([97]\d{0,7})?$/)) {
        $('#sms-sender').val(lastGood);
        $('#sms-sender-error').css('visibility', 'visible').fadeIn('0').fadeOut('100');
    }
    else {
        lastGood = $('#sms-sender').val();
    }
    $('#sms-sender-clone').val(lastGood);

    var numbers = $("#sms-sender").val().split(',');
    $("#number-div").html("");
    for (i = 0; i < numbers.length; i++) {
        if (numbers[i].length == 8) {
            $("#number-div").append("<div class='numbers'>&nbsp;" + numbers[i] + "</div>").fadeIn('slow');
        }
    }
});

$('#sms-sender-clone').bind('focus', function() {
    $('#sms-sender').focus();
});