How to apply on click action on images in javascript/jquery? : <p>I have a <a href="https://jsfiddle.net/hpmawvy0/embedded/result/" rel="nofollow noreferrer">fiddle</a> which I have replicated by seeing the screenshot below:</p>

<p><a href="https://i.stack.imgur.com/D4nY5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D4nY5.png" alt="enter image description here"></a></p>

<p>At this moment, I am able to replicate everything in <a href="https://jsfiddle.net/hpmawvy0/embedded/result/" rel="nofollow noreferrer">fiddle</a> from the design. </p>

<p>The snippets of CSS codes which I have used in order to align images in a straight line are:</p>

<pre><code> .product-contents   
 {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1rem;
 }
</code></pre>

<p><br><br><br>
<strong>Problem Statement:</strong> </p>

<p>In the <a href="https://jsfiddle.net/hpmawvy0/embedded/result/" rel="nofollow noreferrer">fiddle</a>, now if I click on <strong>any square images from the screenshot (Franchise Hub,Business Analytics, Tech Support, etc)</strong> apart from the <strong>Cloud Based &amp; Mobile Image</strong> then A <strong>TV screen image(means a different image)</strong> should appear as present in the <a href="https://jsfiddle.net/vvn3wq7w/7/embedded/result/" rel="nofollow noreferrer">fiddle</a>.</p>

<p>And if I click on <strong>Cloud Based and Mobile</strong> image then a phone image should appear <strong>(as shown in the current screenshot above)</strong></p>

<p>I am not sure how to apply that logic. I am pretty sure I need to use Javascript but I am not sure how to use that. </p>
