JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table">
	<tr>
		<td>1</td>
		<td>10€</td>
	</tr>
	<tr>
		<td>2</td>
		<td>20€</td>
	</tr>
	<tr>
		<td>3</td>
		<td>30€</td>
	</tr>
	<tr>
		<td>4</td>
		<td>40€</td>
	</tr>
	<tr>
		<td>5</td>
		<td>50€</td>
	</tr>
</table>
<a href="#">Valider</a>

CSS

table {margin:auto;border-collapse:collapse;cursor:pointer;}
td {padding:15px 60px;border:1px solid #000;}
tr.selected {color:#fff;background:#444 !important;}
tr:hover {background:#eee;}
a {display:table;margin:20px auto;padding:10px 40px;text-decoration:none;color:#fff;background:#09f;}

JavaScript

function clicked(){
	var cl = this.className;
	
	if (/selected/.test(cl)) {
		this.className = cl.replace(" selected", "");
		selected.splice(selected.indexOf(this), 2);
	}else {
		this.className += " selected";
		selected.push(this, [this.children[0].innerHTML, this.children[1].innerHTML]);
	}
}

function valider(e){
	e.preventDefault();
	
	var confirmation = "Vous avez choisi :  \n",
		i = 0,
		l = selected.length;
	
	for( ; i<l; i+=2) confirmation += "- L'article " + selected[i+1][0] + " qui a pour prix " + selected[i+1][1] + "\n";
	
	l == 0 && (confirmation = "Vous n'avez rien choisi :(");
	
	alert(confirmation);
}

var tr = document.querySelectorAll("#table tr"),
	a = document.querySelector("a"),
	selected = [],
	i = 0,
	l = tr.length;

for ( ; i<l; i++) tr[i].addEventListener("click", clicked, false);

a.addEventListener("click", valider, false);