title: How to highlight the clicked image and show the name of it in a list
body: <p>There are images. When I click on one of them I want to highlight it and display the name of it in a list.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;img class="high" id="x" src="images/Chrysanthemum.jpg" alt="Chrysanthemum" width="300" height="200" onclick="mySelect()"&gt;
  </code></pre>
  
  <p><strong>JS</strong> </p>
  
  <pre><code>function mySelect() {
      document.getElementById("x").style.border = "3px dotted blue";
  }
  </code></pre>
  
  <p>I'm using this code to highlight. But when I click on any image it doesn't highlight. It only highlights the first image.</p>
  
  <p><a href="https://i.stack.imgur.com/5Z74Z.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Z74Z.jpg" alt="example image"></a> </p>
  
  <p>When I click on an image it should highlight. And the name of it should show up in the corresponding <code>&lt;li&gt;</code>. </p>
  
  <p>When I click on another image it should highlight this one and unhighlight the one <strong>before</strong>. And the name of the corresponding <code>&lt;li&gt;</code> should be replaced with the <em>placeholder</em>.</p>