JSFiddle - React, Tailwind, and code Playground

HTML

<div id="banners">
	<img id="img1" src="http://png-5.findicons.com/files/icons/2718/pretty_office_icon_set_part_11/128/number_1.png" class="image block">
	<img id="img2" src="http://png-3.findicons.com/files/icons/2718/pretty_office_icon_set_part_11/128/number_2.png" class="image none">
	<img id="img3" src="http://png-4.findicons.com/files/icons/2718/pretty_office_icon_set_part_11/128/number_3.png" class="image none">

	<div id="description1" class="description" >[1] Bla bla bla</div>
	<div id="description2" class="description none">[2] Bla bla bla</div>
	<div id="description3" class="description none">[3] Bla bla bla</div>

	<hr>

	<button id="1">Banner 1</button>
	<button id="2">Banner 2</button>
	<button id="3">Banner 3</button>
    
</div>

CSS

.block{display:block}
.none{display:none}

JavaScript

$(document).ready(function()
{
	$("button").click(function() {
		id = $(this).attr( 'id' );
		$('.description').addClass('none'); // oculta todas as classes description
		$('#description'+id).removeClass('none').addClass('block'); //exibe a classe description + ID

		$('.image').addClass('none');
		$('#img'+id).removeClass('none').addClass('block');
	});
});