JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<table id="cards">
<tr>
  <td><img src="https://placehold.it/40x60" id="1"></td>
  <td><img src="https://placehold.it/40x60" id="2"></td>
  <td><img src="https://placehold.it/40x60" id="3"></td>
  <td><img src="https://placehold.it/40x60" id="4"></td>
  <td><img src="https://placehold.it/40x60" id="5"></td>
</tr>
</table>

<input type="text" id="result">

CSS

#cards img { border: 2px solid transparent; }
#cards img.border { border: 2px solid green;}

JavaScript

$('#cards img').click(function(){
	var result = new Array();
	$(this).toggleClass('border');

	$('#cards img').each(function(i, e){
		if ( $(this).hasClass('border'))
			result.push( $(this).attr('id') );
	});

	$('#result').val( result.join());
})