Somewhere Intech

const players = data[0].locations[0].players;
const holes = new Array();
for (player of players){
	holes.filter(f=>f.id === player.holeId).length === 0 ? holes.push({id: player.holeId, value: player.score}) : holes.filter(f=>f.id === player.holeId)[0].value+= player.score;
}

После загрузки фото на сайт, оно отображается пользователю. Он в свою очередь рисует на нём прямоугольник (отмечает лицо) и добавляет подпись ниже (или где нибудь ещё). Нарисовать прямоугольник на фото можно c помощью JS. Родитель img имеет свойство CSS position relative, img и все наложения на него absolute. Прямоугольник можно нарисовать обычным DIV с border и для красоты border-radius к примеру, перемещать и масштабировать с помощью свойств CSS top left width height. Можно конечно и с canvas заморочиться, если нужен UI по интереснее.

new fullpage('#fullpage', {
	anchors: ['firstPage', 'secondPage', 'thirdPage'],
	onLeave: function(origin, destination, direction){
		var loadedSection = this,   
			  header = document.querySelector("header.header");
		//using index если прозрачный = фон
		if(origin.index == 0 and direction =='down'){
			header.style.opacity = 0; 
		}
		else if(origin.index == 1 and direction =='up'){
			header.style.opacity = 1;
		}
		//using anchorLink если прозрачный = цвет фона
		if(origin.anchor == 'firstPage' and direction =='down'){
			header.style.backgroundColor = 'transparent'; 
		}
		else if(origin.anchor == 'secondPage' and direction === 'up'){
			header.style.backgroundColor = 'white';
		}
	}
});

Я бы хранил такое только в JSON (ну "везде присутствующие" свойства, конечно, можно вынести отдельно и даже приписывать типы каждой строке для того, чтобы отличать их). Easy на фронте- toString/JSON.parse, также и в тылу. Только вот от инъекций надо защищать, тыл держать прикрытым =))

Возможно реализовать на canvas/svg

В Вашем случае лучше отказаться от селекции по id в пользу class
Если кнопка <input type="submit">то можно так.

<form>
     <input type="text" class="checkme" value="zagol">
     <!-- Другие элементы формы -->
     <input type="submit">
</form>
<form>
     <input type="text" class="checkme" value="users">
     <!-- Другие элементы формы -->
     <input type="submit">
</form>

Можно сделать так

function check(){
	if ($(this).val() !== '') $(this).parent().find('input[type="submit"]').removeAttr("disabled");
	else $(this).parent().find('input[type="submit"]').attr('disabled', true);
}
$(".checkme").change(check);

Если в разметке идут парами

<input type="text" class="checkme">
<button>#Загол</button>
<!-- Другие элементы -->
<input type="text" class="checkme">
<button>#Юзеры</button>

то можно изменить функцию check таким образом

function check(){
	if ($(this).val() !== '') $(this).next('button').removeAttr("disabled");
	else $(this).next('button').attr('disabled', true);
}
$(".checkme").change(check);