JSFiddle - React, Tailwind, and code Playground

by Frank van Puffelen

HTML

<div class="seatArr">        
    <span id="seatArr" >&nbsp;</span> 
    <input type="image" class="seatRightMostRow1" id="1A" alt="sfdsf" src="../Images/available_seat_img.png"  />
    <input type="image" class="seatRightMostRow2" id="1B" alt="sfdsf" src="../Images/available_seat_img.png"  />
</div>

JavaScript

function AddFirstRow() {
    //Create an input type dynamically.
    var element ;
    var seatArr = document.getElementById("seatArr");

    //Assign different attributes to the element.
    var  rowCounter ;
    for( rowCounter = 1 ; rowCounter < 8 ; rowCounter++ ){
        element = document.createElement("input");
        element.setAttribute("type", "image");
        element.setAttribute("src","../Images/available_seat_img.png") ;
        element.setAttribute("class", "seatRightMostRow1");
        element.setAttribute("id", "1V");
        seatArr.appendChild(element);
    }
}

$(function(){
    AddFirstRow();
});

$("input[id]").toggle(function(){
    $(this).attr("src","../Images/selected_seat_img.png");
},function(){
    $(this).attr("src","../Images/available_seat_img.png");
});