JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head lang="en">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">

	<title>Single Page App Without A Framework</title>

	<link href="http://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet">
	<link href="resources/css/styles.css" rel="stylesheet">
</head>

<body>

	<header class="compact">
		<h2 class="tzine"><a href="http://tutorialzine.com/2015/02/single-page-app-without-a-framework/">Back to article</a></h2>
		<h1><a href="#">Single Page App Without A Framework</a></h1>
	</header>

	<div class="main-content">

		<div class="all-products page">

			<div class="filters">
				<form>

					<div class="filter-criteria">
						<span>MatlabRelease</span>
						<label><input type="checkbox" name="matlabrelease" value="R2018b">R2018b</label>
						<label><input type="checkbox" name="matlabrelease" value="R2018a">R2018a</label>						
						<label><input type="checkbox" name="matlabrelease" value="R2017b">R2017b</label>
						<label><input type="checkbox" name="matlabrelease" value="R2017a">R2017a</label>						
						<label><input type="checkbox" name="matlabrelease" value="R2016b">R2016b</label>
						<label><input type="checkbox" name="matlabrelease" value="R2016a">R2016a</label>						

					</div>

					<button>Clear filters</button>

				</form>

			</div>

			<ul class="products-list">
				<script id="products-template" type="x-handlebars-template">​
					{{#each this}}
						<li data-index="{{id}}">
							<a href="#" class="product-photo"><img src="{{image}}" height="130" alt="{{name}}"/></a>
							<h2><a href="#"> {{title}} </a></h2>
							<ul class="product-description">
								<li><span>MatlabRelease: </span>{{matlabrelease}}</li>
								<li><span>Description: </span>{{description.small}}</li>
							</ul>
							<button>More info</button>
							<div class="highlight"></div>
						</li>
					{{/each}}
				</script>

			</ul>

		</div>


		<div class="single-product page">

			<div...

JavaScript

$(function () {

	// Globals variables

		// 	An array containing objects with information about the products.
	var products = [],

		// Our filters object will contain an array of values for each filter

		// Example:
		// filters = {
		// 		"manufacturer" = ["Apple","Sony"],
		//		"storage" = [16]
		//	}
		filters = {};


	//	Event handlers for frontend navigation

	//	Checkbox filtering

	var checkboxes = $('.all-products input[type=checkbox]');

	checkboxes.click(function () {

		var that = $(this),
			specName = that.attr('name');

		// When a checkbox is checked we need to write that in the filters object;
		if(that.is(":checked")) {

			// If the filter for this specification isn't created yet - do it.
			if(!(filters[specName] && filters[specName].length)){
				filters[specName] = [];
			}

			//	Push values into the chosen filter array
			filters[specName].push(that.val());

			// Change the url hash;
			createQueryHash(filters);

		}

		// When a checkbox is unchecked we need to remove its value from the filters object.
		if(!that.is(":checked")) {

			if(filters[specName] && filters[specName].length && (filters[specName].indexOf(that.val()) != -1)){

				// Find the checkbox value in the corresponding array inside the filters object.
				var index = filters[specName].indexOf(that.val());

				// Remove it.
				filters[specName].splice(index, 1);

				// If it was the last remaining value for this specification,
				// delete the whole array.
				if(!filters[specName].length){
					delete filters[specName];
				}

			}

			// Change the url hash;
			createQueryHash(filters);
		}
	});

	// When the "Clear all filters" button is pressed change the hash to '#' (go to the home page)
	$('.filters button').click(function (e) {
		e.preventDefault();
		window.location.hash = '#';
	});


	// Single product page buttons

	var singleProductPage = $('.single-product');

	singleProductPage.on('click', function (e) {

		if (singleProductPage.hasClass('visible'))...