JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="c">

<span id="b">
  
</span>

CSS

*:focus {
  border: 2px solid red;
}

JavaScript

var a = document.getElementById('c');
var b = document.getElementById('b');

function setInnerHTML (p_item,p_associated_div, p_return_value) {
// ... makes the ajax call and sets the result
// sets innerHTML like this
	var ajaxResult = '<button type="button">Dynamic Button</button>';
 	window[p_item] = ajaxResult;
  
 	if ( window && window[p_item]) {
  	 if (p_associated_div && document.getElementById(p_associated_div))
   document.getElementById(p_associated_div).innerHTML=ajaxResult;
  if (p_return_value == 'true')
    return ajaxResult;
  }

}

var resetAllItems = function () {
		setInnerHTML('p_item1', 'b', 'true');
}

/* window['p_item'] = '<button type="button">Dynamic Button</button>'
var result = window['p_item']; */

a.addEventListener('blur', function () {
	resetAllItems();
})

a.addEventListener('focus', function () {
resetAllItems();
})

b.addEventListener('click', function (e) {
if (e.target.nodeName == 'BUTTON') {
console.log('click');
}
});