Button needs to be clicked twice despite there is an value in input

JavaScript
1

Hi All, would like to seek some advice/assistance on the issue below.

I have a function called createQueueNo which would take the 3 variables; normalQueueNumber, priorityQueueNumber and contactNo.

The values for these 3 variables will be obtained from the front end side and then post to the backend to trigger the sms.

The action will only be fulfilled when either the Normal Queue Button or the Priority Queue Button is pressed and the input for the Contact No is filled up with numbers.

Currently the issue is when the page reloads or refreshes and when the Contact No input is filled up and either the Normal queue button or the Priority queue button is clicked, sms is not triggered unless the Normal queue button or Priority queue button is clicked again.

The code is as follows:

let iniNumber = "";

$(".contactno").keyup(function(e) {
	let contactNo = $(this).val();
	let countryCode = $(this).intlTelInput('getSelectedCountryData').dialCode;
	iniNumber = (countryCode + contactNo);
	showIniNumber();
}); 

function showIniNumber() {
	return iniNumber;

}

function createQueueNo(normalQueueNumber, priorityQueueNumber){
	let queueNo = normalQueueNumber + priorityQueueNumber;
	$(".queueNo").html("No. of patients in queue: " + queueNo);
	//console.log("Normal Queue: " + normalQueueNumber + " Priority Queue: " + priorityQueueNumber);
	
	$("#normalQueueButton").click(function(){
		const body = {
			contactNo: showIniNumber(),
			queueNumber: queueNo,
			normalQueueNumber: normalQueueNumber
		};
		console.log(body);
		$.post(url + 'send-sms', body, (data) =>{
			console.log(data);
			console.log(url + 'send-sms');
			if(data.message === "SMS sent successfully."){
				console.log("SMS sent successfully.");
				}else{
				console.log("Error: " + (data.message));
			}
		});
	})
	$("#priorityQueueButton").click(function(){	
		const body = {
			contactNo: showIniNumber(),
			queueNumber: queueNo,
			priorityQueueNumber: priorityQueueNumber
		};
		console.log(body);
		$.post(url + 'send-sms', body, (data) =>{
			
			console.log(data);
			console.log(url + 'send-sms');
			if(data.message === "SMS sent successfully."){
				console.log("SMS sent successfully.");
				}else{
				console.log("Error: " + (data.message));
			}
		});
		
	});
}

Therefore, how do I rectify this issue? I tried doing the following but my Contact no is undefined.

function createQueueNo(normalQueueNumber, priorityQueueNumber){
	let queueNo = normalQueueNumber + priorityQueueNumber;
	$(".queueNo").html("No. of patients in queue: " + queueNo);
	//console.log("Normal Queue: " + normalQueueNumber + " Priority Queue: " + priorityQueueNumber);
	$(document).ready(function(){

        $(".contactno").keyup(function(e) {
            let contactNo = $(this).val();
            let countryCode = $(this).intlTelInput('getSelectedCountryData').dialCode;
            iniNumber = (countryCode + contactNo);
            showIniNumber();
        }); 

	$("#normalQueueButton").click(function(){
		const body = {
			contactNo: showIniNumber(),
			queueNumber: queueNo,
			normalQueueNumber: normalQueueNumber
		};
		console.log(body);
		$.post(url + 'send-sms', body, (data) =>{
			console.log(data);
			console.log(url + 'send-sms');
			if(data.message === "SMS sent successfully."){
				console.log("SMS sent successfully.");
				}else{
				console.log("Error: " + (data.message));
			}
		});
	})
	$("#priorityQueueButton").click(function(){	
		const body = {
			contactNo: showIniNumber(),
			queueNumber: queueNo,
			priorityQueueNumber: priorityQueueNumber
		};
		console.log(body);
		$.post(url + 'send-sms', body, (data) =>{
			
			console.log(data);
			console.log(url + 'send-sms');
			if(data.message === "SMS sent successfully."){
				console.log("SMS sent successfully.");
				}else{
				console.log("Error: " + (data.message));
			}
		});
		
	});
});
}

The link to this will be (https://github.com/liabilityquek/Patient-Management-System/tree/master/frontend/js)

Codepen: (https://codepen.io/hrhquek/pen/ExpGqZW)