JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<table>
  <tr>
    <td>
      <input type="number" value="3" />
      <img/>
    </td>
    <td>
    <img/>
      <input type="number" value="2" />
      
    </td>
    <td>
      <input type="number" value="1" />
      <img/></td>
  </tr>
</table>
<button>
Click
</button>
<input type = "text"/>

CSS

img {
  display:none;
}

JavaScript

var green = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-y2pDJfDRIQQymF9rQce0kMBYnLzFoOiBCtcUgddhrey_wrny";

var yellow = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Emblem-important-yellow.svg/120px-Emblem-important-yellow.svg.png";

var red = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Circle-icons-flame.svg/512px-Circle-icons-flame.svg.png";

$(function() {

$("input").each(function(){
	
});

  $("button").on('click', function() {
    $("input").each(function() {
      $(this).siblings().eq(0).attr("src", changeImg($(this).val()))
    });

    $("input,img").toggle();

  });
});

function changeImg(value) {
  if (value == 1) {
    return red;
  }

  if (value == 2) {
    return yellow;
  }

  if (value == 3) {
    return green;
  }

}