JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="1" class="display" value="1"> 1 <span id="1"></span>
<br>
<input type="checkbox" name="2" class="display" value="2"> 2 <span id="2"></span>
<br>
<input type="checkbox" name="3" class="display" value="3"> 3 <span id="3"></span>
<br>
<input type="checkbox" name="4" class="display" value="4"> 4 <span id="4"></span>
<br>
<input type="checkbox" name="5" class="display" value="5"> 5 <span id="5"></span>

JavaScript

var showSpan = function(){
	var option = this,
  		option_value = option.value;
      spanID = document.getElementById(option_value),
      spanID_value = spanID.id;
      
      if (option.checked){
      	if (option_value === spanID_value) spanID.textContent = "Display text";
      } else {
      	spanID.textContent = "";
      }
};

var checkLimit = function(){
	var option = this,
  		option_value = option.value,
      checkedcount = 0,
      maxChecked = 2;
      
      if (option.checked) {
      	checkedcount += 1;
        console.log(checkedcount);
      }
};


var elements = document.getElementsByClassName('display');
var e = new Event('change');

for ( var i=0, len=elements.length; i<len; i++ ){
	var element = elements[i];
  element.addEventListener('change', showSpan);
  element.addEventListener('change', checkLimit);
  element.dispatchEvent(e);
}