jQuery Simple Example

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<div id="displayObject1">
  <span>Display object 1</span>
</div>
<div>
  <hr>
</div>
<div id="displayObject2">
  <span>Display object 2</span>
</div>
<div id="table">
</div>

CSS

.on {
	background-color: green;
}
.off {
	background-color: red;
}

JavaScript

team1 = {
	"information1": {
		"name": "tom",
		"age": "34"
	},
	"information2": {
		"name": "bob",
		"age": "20"
	},
};

team2 = {
	"information1": {
		"name": "betsy",
		"age": "27"
	},
	"information2": {
		"name": "brian",
		"age": "10"
	},
};

$(document).ready(function() {

	$("#displayObject1").on("click", function() {
		switchData(team1);
	});

	$("#displayObject2").on("click", function() {
		switchData(team2);
	});
	$("#table").on("click", ".on", function() {
		console.log(this);
		$(this).removeClass("on");
		$(this).addClass("off");
	});
	$("#table").on("click", ".off", function() {
		$(this).addClass("on");
		$(this).removeClass("off");
	});
});	

function switchData(object) {
	$("#table").contents("div").remove();
	for (var i = 0; i < Object.keys(object).length; i++) {
		var row = "<div class='row on'>";
		var information = Object.keys(object)[i];
		row += object[information].name;
		row += "</div>";
		$("#table").append(row);
	}
}