JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Service Domain -->
                    <div class="block block-square block-themed" id="domains_block">
                        <div class="block-header block-header-default bg-default-light">
                            <h3 class="block-title">
                                Choose service domain
                            </h3>
                        </div>
                        <div class="block-content block-content-full space-y-3">
                            <div class="space-y-2">
                                <div class="form-check">
                                    <input class="form-check-input domain_select" type="radio" id="d1" name="d"
                                        value="1">
                                    <label class="form-check-label" for="d">I want to register a
                                        new domain (&euro;12.00/year).</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input domain_select" type="radio" id="d2" name="d"
                                        value="2" checked>
                                    <label class="form-check-label" for="d">I already have and use my own
                                        domain.</label>
                                </div>
                            </div>

                            <div class="input-group d-none domains" id="dmn1">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">www.</span>
                                </div>
                                <input type="text" class="form-control dmn1" name="domain" value="" id="new_domain">
                                <span class="col-2 dmn1_span">
                                    <select class="form-select tld" name="tld" id="tld">
                                        <option value="com"...

JavaScript

// domain selector
    $("input[name='d']").click(function () {
        var option = $(this).val();
        $("div.domains").addClass('d-none');
        $("#dmn" + option).removeClass('d-none');
    });
  
  // domain validator
    var timer;

    $("#dmn2, #dmn1, #tld").bind("keyup change", function () {
        clearTimeout(timer);
        timer = setTimeout(validateDomain, 2500);
        return false;
    });

    function validateDomain() {

        $("#domain_status").hide();
        $("#domain_loader").show();

        var $inputs = $('#page').find("input, select, button, textarea");

        $inputs.prop("disabled", true);

        var check_domain = false;
        var domain_type = 0;

        if ($(".domain_select:checked").val() === '2' && $("#existing_domain").val().length > 3) {

            var pattern = /^[a-z0-9-\.]+\.[a-z]{2,4}/;
            var domain = $("#existing_domain").val();

            if (pattern.test(domain)) {
                var check_domain = true;
                var domain_type = 2;
            }

        } else if ($(".domain_select:checked").val() === '1' && $("#new_domain").val().length > 1) {

            var pattern = /^[a-z0-9-\-]{3,}(\.(com|net|org))?$/;
            var domain = $("#new_domain").val() + '.' + $(".tld").val();

            if (pattern.test(domain)) {
                var check_domain = true;
                var domain_type = 1;
            }
        }

        if (check_domain === true) {

            if (request) {
                request.abort();
            }
    
            var data = {
                domain: domain,
                csrf: $("#csrf").val()
            }
    
            request = $.ajax({
                cache: false,
                url: '/cart/check_domain',
                type: "post",
                dataType: "json",
                data: JSON.stringify(data)
            });
    
            request.done(function (response) {
                $('#domain_loader').hide();
            ...