JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="text custom creditcardnumber" value="" placeholder="9823 3249 0000 0394" />
<div class="ccvalue"></div>

JavaScript

creditCardTypeAction();

	/**
	  * Detect Credit Card Type Function
	  */
	function creditCardTypeAction(){
		$('.creditcardnumber').on('keyup', function(){
			if($(this).val().length >= 4){
				cardType = creditCardTypeFromNumber($(this).val());
			}
		});
	}

	function creditCardTypeFromNumber(num) {
		
		// first, sanitize the number by removing all non-digit characters.
		num = num.replace(/[^\d]/g,'');
		
		// MasterCard
		if (num.match(/^5[1-5][0-9]{5,}$/)) {
			$('.cardsacceptedicon').removeClass('active');
			$('.cardsacceptedicon.mastercard').addClass('active');
			
			$('div.ccvalue').html('MasterCard');
			return 'MasterCard';
		
		// Visa
		} else if ( num.match(/^4[0-9]{6,}$/) ) {
			$('.cardsacceptedicon').removeClass('active');
			$('.cardsacceptedicon.visa').addClass('active');
			
			$('div.ccvalue').html('Visa');
			return 'Visa';
		
		/* AMEX */
		} else if (num.match(/^3[47][0-9]{5,}$/)) {
			$('.cardsacceptedicon').removeClass('active');
			$('.cardsacceptedicon.amex').addClass('active');
			
			$('div.ccvalue').html('AMEX');
			return 'AMEX';
		
		// Discover
		} else if (num.match(/^6(?:011|5[0-9]{2})[0-9]{3,}$/)) {
			$('.cardsacceptedicon').removeClass('active');
			$('.cardsacceptedicon.discover').addClass('active');
			
			$('div.ccvalue').html('Discover');
			return 'Discover';
		
		// Diners Club
		} else if (num.match(/^3(?:0[0-5]|[68][0-9])[0-9]{4,}$/)){
			$('.cardsacceptedicon').removeClass('active');
			$('.cardsacceptedicon.diners').addClass('active');
			
			$('div.ccvalue').html('Diners Club');
			return 'Diners Club';
		
		// JCB
		} else if (num.match(/^(?:2131|1800|35[0-9]{3})[0-9]{3,}$/)){
			$('.cardsacceptedicon').removeClass('active');
			$('.cardsacceptedicon.jcb').addClass('active');
			
			$('div.ccvalue').html('JCB');
			return 'JCB';
		}
		
		$('div.ccvalue').html('UNKNOWN');
		return 'UNKNOWN';
	}