title: Change border colors when button is clicked
body: <p>Hi so im trying to make it so when one button is clicked the border color is changed to blue and all the other button border color is changed to orange. my problem is, it's not working the border color for other button is not changing.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function clickimageone(el){
   el.style.border = "1px solid blue";
   document.getElementById("border2").className="borderorange";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.border1{
   border: 1px solid red;
  }
  .border2{
   border: 1px solid red;
  }
  .bordeorange{
   border: 1px solid orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="image"&gt;&lt;img src="img/500.png" onclick="clickimageone(this)" class="border1" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"&gt;&lt;/div&gt;
  &lt;div class="image"&gt;&lt;img src="img/1000.png" onclick="clickimagetwo(this)" class="border2" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>so basically what im asking is when one button is clicked the border of that button is changing to blue and all the other button color will change to orange.</p>