JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://bootswatch.com/5/darkly/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">


<div class="container-fluid">

	<div id="hk-1" data-hotkey-edit="false" class="btn btn-sm hk-btn-group px-1" style="background-color: #424454!important; padding: 0.15rem 0.25rem;">
		<span class="badge btn-sm bg-success" data-active="true">STRG</span>
		<span class="badge btn-sm bg-success" data-active="true">SHIFT</span>
		<span class="badge btn-sm bg-success" data-active="true">ALT</span>
		<span class="badge btn-sm text-dark fw-bold"><i class="fa-solid fa-plus"></i></span>
		<span class="badge btn-sm bg-success" data-active="true">F1</span>
	</div>
	
	<div class="btn btn-sm hk-btn-modify-group px-1" style="background-color: #424454!important; padding: 0.15rem 0.25rem;" id="">
		<span class="badge btn-sm text-success"><i class="fa-solid fa-toggle-on fa-xl"></i></span>
		<span id="edit_hotkey" class="badge btn-sm text-warning"><i class="fa-solid fa-pencil"></i></span>
	</div>
	
</div>

CSS

.hk-btn-modify-group > span,
.hk-btn-group > span {
    padding: 0.35rem 0.65em;
}

JavaScript

$("#edit_hotkey").click(function(){
			$("#hk_1").attr('data-hotkey-edit', ($("#hk_1").attr('data-hotkey-edit') == "false" ? true : false));
			
			
	});
	
	var hk_1_EDIT = $("#hk_1").attr('data-hotkey-edit');
			console.log(hk_1_EDIT);
			
	var hk_1_EDIT = document.getElementById("hk-1").getAttribute("data-hotkey-edit");
		alert(hk_1_EDIT);