JSFiddle - React, Tailwind, and code Playground

by nickxbs

HTML

<p>Sandro</p>
<p>Andrea</p>
<p>Claudio</p>

<input type="text" placeholder="try surnames">

JavaScript

var Person = function(name, element){
    this.name = name;
    this.element = element;
    document.addEventListener('addsurname', this.addSurname.bind(this), false);
};

Person.prototype.addSurname = function(evt){
    this.element.textContent = this.name + " " + evt.detail.surname;
}

document.querySelector('input').addEventListener('input', function(){
       var evt =  new CustomEvent('addsurname', {
  				bubbles: true,
  				cancelable: true,
  				detail: {surname: this.value}
			});    
    this.dispatchEvent(evt);
});

var p = document.querySelectorAll('p');
for(var x = 0; x < p.length; x++){
    new Person(p[x].textContent, p[x]);
}