JSFiddle - React, Tailwind, and code Playground

JavaScript

/*
	UTILS
*/
function inArray(string, array)
{
    return (array.indexOf(string) > -1);
}

/*
	LISTE DES CIBLES
*/
var target = 
[
    "Etitia Arnaud"
];

var guardian =
[
	"Benjamin LEDRAPPIER"
];

/*
	CHARGEMENT API HANGOUT
*/                                         
gadgets.util.registerOnLoadHandler(init);

function init() 
{                                                      
	gapi.hangout.onApiReady.add(function(eventObj) 
	{
    	if (eventObj.isApiReady)
    	{
			load_participant();
    		if(!isTarget())
	        	document.getElementById('sane_hangout').style.visibility = 'visible';
    		else
	        	document.getElementById('warning').style.visibility = 'visible';
    	}
   	});

	gapi.hangout.onParticipantsChanged.add(load_participant);
	gapi.hangout.data.onStateChanged.add(updateCheckbox);
}

function load_participant()
{
	var participants = gapi.hangout.getParticipants();
	muted = [];
  	var html = '';
  	for (var index in participants) 
  	{
    	var participant = participants[index];
    	if (inArray(participant.person.displayName, target))
    	{
    		html += '<p>' + participant.person.displayName + ' <input class="button" type="button" value="DECIBLER" onClick="delTarget(\'' + participant.person.displayName + '\')"/></p>';
	    	muted.push(participant.id);
	    }
	    else if()
	    	html += '<p>' + participant.person.displayName + ' (GUARDIAN)</p>';
    	else
	    	html += '<p>' + participant.person.displayName + ' <input class="button" type="button" value="CIBLER" onClick="addTarget(\'' + participant.person.displayName + '\')"/></p>';
  	}
  	document.getElementById('hangout_participant').innerHTML = html;
  	document.getElementById('hangout_participant').style.visibility = 'visible';
}

function addTarget(name) 
{
	var local = gapi.hangout.getLocalParticipant();
	if (inArray(local.person.displayName, guardian))
	{
		realAdd(name);
	}
}

function realAdd(name) 
{
	target.push(name);
}

function delTarget(name) 
{
	var local =...