JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#">
    <table>
        <tr>
            <td><img src="img/sunny.png" alt="Sunny" title="Sunny"></td>
            <td><img src="img/cloudy_snow.png" alt="Clouds with Snow" title="Cloudy with Snow"></td>
            <td><img src="img/sunny_cloudy.png" alt="Sunny with Clouds" title="Sunny with Clouds"></td>
            <td><img src="img/sunny_snow.png" alt="Sunny with Snow" title="Sunny with Snow"></td>
            <td><img src="img/thunderstorm.png" alt="Thunderstorm" title="Thunderstorm"></td>
        </tr>
    </table>
</form>

CSS

.selected{
    border:10px solid red;
}

JavaScript

function addfunction(){
    console.log(link.length);
    link.forEach( function(e){
        e.classList.remove('selected');
    });
   
    this.classList.add('selected');
}

var link = [].slice.call(document.querySelectorAll("form img"));


link.forEach(function(e){
    e.addEventListener("click",addfunction,false);
});