JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<div class="d-flex-wrap col-12 p-0" onclick="FocusHKInput(this.id)" onkeyup="GetHotkeyChange(this.id)" id="HK1">
					<h6 class="mt-4 mb-2 text-uppercase">Refresh Server Info HOTKEY</h6>
					<div class="input-group btn-group-hk-checkbox input-group-sm mt-1 mb-2" role="group">
						<label class="btn bg-owncolor1 disabled" for="HK1_CB_STRG"><span id="HK1_CB_STRG_BADGE" class="badge bg-dark">STRG</span></label>
						<input onchange="handleChange(event)" data-checked="false" type="checkbox" class="btn-check" id="HK1_CB_STRG" autocomplete="off">
						<label class="btn bg-owncolor1" for="HK1_CB_SHIFT"><span id="HK1_CB_SHIFT_BADGE" class="badge bg-dark">SHIFT</span></label>
						<input onchange="handleChange(event)" data-checked="false" type="checkbox" class="btn-check disabled" id="HK1_CB_SHIFT" autocomplete="off">
						<label class="btn bg-owncolor1" for="HK1_CB_ALT"><span id="HK1_CB_ALT_BADGE" class="badge bg-dark">ALT</span></label>
						<input onchange="handleChange(event)" data-checked="false" type="checkbox" class="btn-check disabled" id="HK1_CB_ALT" autocomplete="off">
						<label class="btn bg-owncolor1 px-1"><i class="fas fa-plus text-dark"></i></label>
						<div style="" ><input onkeydown="HotkeyInput(event)" id="HK1_INPUT" type="text" class="form-control form-control-owncolor1 text-muted form-control-sm hk_input text-center"></div>
						<label class="btn bg-owncolor1"><span id="HK1_HK_BADGE" class="badge bg-dark">F2</span></label>
						<button class="btn btn-owncolor1" id="HK1_ON_OFF_TOGGLE"><i class="fas fa-toggle-on fa-lg text-success"></i></button>
						<button onclick="editHK('HK1')" class="btn btn-owncolor1" id="HK1_SAVE_CHANGE"><i class="fas fa-pen"></i></button>
					</div>
				</div>

<input type="checkbox" id="demo1">
<input type="checkbox" id="demo2">
<input type="checkbox" id="demo3">

JavaScript

var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var demo3 = document.getElementById("demo3");

document.addEventListener("keydown",function(e){
		//shift	16 ctrl	17 alt 18
		if (e.target.nodeName == "INPUT") {
				//console.log("Parent ID: " + e.target.parentNode.parentNode.parentNode.id);
				16 == e.keyCode ? document.getElementById(e.target.parentNode.parentNode.parentNode.id + "_CB_STRG").checked = true : "";
				17 == e.keyCode ? document.getElementById(e.target.parentNode.parentNode.parentNode.id + "_CB_SHIFT").checked = true : "";
				18 == e.keyCode ? document.getElementById(e.target.parentNode.parentNode.parentNode.id + "_CB_ALT").checked = true : "";
		}
});

document.addEventListener("keyup",function(e){
	if (e.target.nodeName == "INPUT") {
			16 == e.keyCode ? document.getElementById(e.target.parentNode.parentNode.parentNode.id + "_CB_STRG").checked = false : "";
			17 == e.keyCode ? document.getElementById(e.target.parentNode.parentNode.parentNode.id + "_CB_SHIFT").checked = false : "";
			18 == e.keyCode ? document.getElementById(e.target.parentNode.parentNode.parentNode.id + "_CB_ALT").checked = false : "";
	}
});