JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="my_id"></div>

CSS

body{text-align:center}
#my_id{
  width:100px;
  height:100px;
  margin:20px auto;
  background:#0CF;
  border-radius:3px
}

JavaScript

var a=[];
function keyName(p){
	var cases = {16:'Shift',17:'CTRL',18:'Alt'};
	return cases[p] ? cases[p] : '';
}
function keyPosition(p){
	var cases = {1:'Left',2:'Right'};
	return cases[p] ? cases[p]+' ' : '';
}
$(document).on('keydown',function(e){
	a.push(keyPosition(e.originalEvent.location)+keyName(e.keyCode));
})
$('#my_id').on('click',function(){
	var c='';
  var removeDuplicates = [];
  a =a.filter(function(v){return v!==''});
  $.each(a, function(i, el){
		if ($.inArray(el, removeDuplicates) === -1){
        removeDuplicates.push(el);
				c=c+(el)+' + ';
    }
  });
  if (c) alert(c.slice(0, -3))
	a=[];	
});