JSFiddle - React, Tailwind, and code Playground

HTML

<input style="width: 45%;" type="text" name="user_phone" value="" placeholder="Your phone number" />

JavaScript

$(document).ready(function(){
    $('input[name=user_phone]').keyup(function() {
        var number = $('input[name=user_phone]').val();
        if (!number.contains('(') && !number.contains(')') && number.length === 2) {            
            $('input[name=user_phone]').val('(' + number + ')');
        } else if (number.contains('(') && !number.contains(')') && number.length === 3) {
            $(this).val(number + ')');
        } else if (!number.contains('(') && number.contains(')') && number.length === 3) {
            $(this).val('(' + number);
        }
    });
});