JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div class="col-md-6 img-wrapper">

                <div><img src="https://placeholdit.imgix.net/~text?txtsize=16&bg=00ff00&txtclr=0000ff&txt=Shankar%20Dayal&w=150&h=75" alt="hello" class="img" id="firstImg"></div>
                <div><img src="https://placeholdit.imgix.net/~text?txtsize=16&bg=FF0000&txtclr=0000ff&txt=Kocheril%20Rama&w=150&h=75" alt="hello" class="img" id="secondImg"></div>
                <div><img src="https://placeholdit.imgix.net/~text?txtsize=16&bg=FFFF00&txtclr=0000ff&txt=Avul%20Pakir&w=150&h=75" alt="hello" class="img" id="thirdImg"></div>
                <div><img src="https://placeholdit.imgix.net/~text?txtsize=16&bg=FF00FF&txtclr=00FFff&txt=Pratibha%20Devisingh&w=150&h=75" alt="hello" class="img" id="fourthImg"></div>
                <div><img src="https://placeholdit.imgix.net/~text?txtsize=16&bg=00FFFF&txtclr=ff00ff&txt=Pranab%20Kumar&w=150&h=75" alt="hello" class="img" id="fifthImg"></div>

        </div>
        <div class="col-md-6" id="contentBox">
        </div>
        <div class="col-md-12">
        <button type="button" id="submit" >Submit</button>
        </div>

CSS

button{
        float:right;
        margin-top: -2%;
        margin-right: 5%;
    }
#contentBox{
        width:50%;
        height:100%;
        border:2px solid black;
        margin-top: 10%;
        padding:10px;
}
.img-wrapper div {
  display: inline-block;
}

JavaScript

$("#firstImg").click(function(){
          $('#contentBox').html('');  
          $('<p>Shankar Dayal Sharma was the ninth President of India</p>').appendTo('#contentBox');
            $('#contentBox').show();
              $(this).append($('<i class="fa fa-check" aria-hidden="true"></i>'));
        });
        $("#secondImg").click(function(){
          $('#contentBox').html('');
            $('<p>Kocheril Raman Narayanan was the tenth President of India.<p>').appendTo('#contentBox');
            $('#contentBox').show();
        });
        $("#thirdImg").click(function(){
          $('#contentBox').html('');
            $('<p>.Avul Pakir Jainulabdeen "A. P. J." Abdul Kalam  was the 11th President of India from 2002 to 2007.</p>').appendTo('#contentBox');
            $('#contentBox').show();
        });
        $("#fourthImg").click(function(){
          $('#contentBox').html('');
            $('<p>Pratibha Devisingh Patil is an Indian politician who served as the 12th President of India from 2007 to 2012.</p>').appendTo('#contentBox');
            $('#contentBox').show();
        });
        $("#fifthImg").click(function(){
          $('#contentBox').html('');
            $('<p>Pranab Kumar Mukherjee  is the 13th and current President of India.</p>').appendTo('#contentBox');
            $('#contentBox').show();
        });

$(".img").click(function() {
	$(this).addClass("visited");
});
$("#submit").click(function() {
	$("img").each(function() {
  	$(this).after($(this).hasClass("visited") ? "Yes":"No");
  });
	return false;
});