JSFiddle - React, Tailwind, and code Playground

HTML

<a href = "#" class = "article" onClick = "addArticles(0); getArticles(0);">Article 1</a><br>
<a href = "#" class = "article" onClick = "addArticles(1); getArticles(1);">Article 2</a><br>
<a href = "#" class = "article" onClick = "addArticles(2); getArticles(2);">Article 3</a><br>
<a href = "#" class = "article" onClick = "addArticles(3); getArticles(3);">Article 4</a><br>
<div id = "basket">
</div>

CSS

a {
			text-decoration: none;
			color: grey;
			font-size: 40px;
		}
		
		a:visited {
			color: grey;
		}
		
		#basket {
			border: 1px solid black;
			width: 320px;
			height: 200px;
			overflow: auto;
		}
		
		.article {
			font-family: Verdana;
			font-size: 16px;
			color: brawn;
		}
		
		div {

		}
		
		.article-row {
			width: 290px;
			height: 50px;
			margin: 5px;
			border: 1px solid black;
			background: yellow;
		}
		
		.row-cell, .cell-select, .select_articles {
			width: 41px;
			height: 41px;
			margin: 5px 3px 5px 3px;
			background-color: red;
			float: left;
		}
		
		#basket>.article-row>.row-cell:nth-child(6) {
			background: grey;
		}
		
		#basket>#article_1>.row-cell:nth-child(1) {
			background: green;
		}	
		
		#basket>#article_2>.row-cell:nth-child(1) {
			background: pink;
		}
		
		#basket>#article_3>.row-cell:nth-child(1) {
			background: blue;
		}
		
		#basket>#article_4>.row-cell:nth-child(1) {
			background: orange;

JavaScript

var	basket_div = document.getElementById("basket");
//Добавляем товары в локальное хранилище
function addArticles(a) {
		var articles = [
			"article_1",
			"article_2",
			"article_3",
			"article_4"
		];
		for (i=0; i<articles.length; i++) {
			if (localStorage.getItem(articles[a]) == articles[a]) {
				alert ("Этот товар уже в хранилище!");
				break;						
			} else {
				var key = articles[a];
				localStorage[key] = articles[a];
				alert ("Товар " + articles[a] + " добавлен в локальное хранилище");
				break;
			}
		}
}

//Достаем товары из локального хранилища и отображаем их в DOM
function insertToDOM (a) {
	//Создаем шаблон единственной инструкции var
	var storage_articles = [localStorage.getItem("article_1"),
							localStorage.getItem("article_2"),
							localStorage.getItem("article_3"),
							localStorage.getItem("article_4")
							];
	//Удаляем пустые элементы из массива
	for(var i = storage_articles.length; i--;){
		if (storage_articles[i] === null) storage_articles.splice(i, 1);
	}	
	//Создание элемента newDiv с присвоением ему определенного айди
	for (i=0; i<storage_articles.length; ++i) {
		var newDiv = document.createElement('div');
			for (j=0; j < 6; ++j) {
				var cell = document.createElement('div');
				cell.className = 'row-cell';
				var cells = document.getElementsByClassName('row-cell');
				newDiv.appendChild(cell);
				newDiv.id = '' + storage_articles[i];
				newDiv.className = 'article-row';
				basket_div.appendChild(newDiv);
				}
				newDiv.childNodes[3].className = "cell-select";
				//Функция удаления ряда из DOM
				function deleteFromDOM(x) {
						var x = newDiv;
						basket_div.removeChild(x);
						alert("Товар " + x.id + " удален из корзины");
				}
				if (newDiv.id == "article_1") {
					newDiv.childNodes[0].innerHTML = "first";
					newDiv.childNodes[3].id = "select_" + newDiv.id;
					newDiv.childNodes[5].onclick = function() {deleteFromDOM(newDiv.id  = "article_1")};
				}
				if (newDiv.id == "article_2")...