title: Javascript change multiple elements border style one at a time onclick
body: <p>As a JavaScript rookie I'm still learning as my site grows, and have been battling for the past 12 hours with this.</p>
  
  <p><strong>What my site does</strong></p>
  
  <ul>
  <li>Player select team who they think will win match.</li>
  <li>Matches/Fixtures are pulled from database</li>
  <li>Player makes pick for the round, a round can have 1 to countless matches</li>
  <li>nr of elements(images and radio btns) created in php loop will depend on nr of matches for given round</li>
  </ul>
  
  <p><strong>What I am trying to do</strong></p>
  
  <ul>
  <li>When user selects a team/clicks on it, make selected teams image-border:red</li>
  </ul>
  
  <p><strong>What I've got</strong></p>
  
  <p><em>HTML</em></p>
  
  <pre><code>echo'&lt;div class="teams"&gt;';
          echo'&lt;img src="images/teams/'.$src1.'.png" class="t1"  /&gt;'; 
          echo'&lt;img src="images/teams/'.$src2.'.png" class="t2" /&gt;';  
      echo'&lt;/div&gt;';
  
   &lt;!--Radio Buttons below comment--&gt;
   &lt;label class="blue"&gt;&lt;input type="radio"  onclick="border()" name="picks['.$x.']" id="one" value="'.$row['team1'].'"&gt;&lt;span&gt;'.$team1.'&lt;/span&gt;&lt;/label&gt;&lt;br /&gt;
      &lt;label class="green"&gt;&lt;input type="radio"  onclick="border()" name="picks['.$x.']" id="two" value="'.$row['team2'].'"&gt;&lt;span&gt;'.$team2.'&lt;/span&gt;&lt;/label&gt;&lt;br /&gt;
      &lt;label class="green"&gt;&lt;input type="radio"  onclick="" name="picks['.$x.']" id="three" value="draw"&gt;&lt;span&gt;Draw&lt;/span&gt;&lt;/label&gt;&lt;br /&gt;
  </code></pre>
  
  <p><em>Jquery attempt one</em></p>
  
  <pre><code>function border() {
      var oneChecked = $('#one').is(':checked');
      var twoChecked = $('#two').is(':checked');
  
      $('.t1').each(function(){
         if(oneChecked)
         {
           $(this).siblings('t2').css({'border':'none'});
           $(this).css({'border':'1px solid red'});
         }
         else if(twoChecked)
         {
           $(this).css({'border':'none'});
           $(this).siblings('t2').css({'border':'1px solid red'});
         }
      });   
  }
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>All the team1 borders are selected with all the matches with a single click(see img below)</p>
  
  <p><em>Image</em></p>
  
  <p><img src="https://i.stack.imgur.com/v6Vkp.png" alt="enter image description here"></p>
  
  <p><em>Javascript attempt 2</em></p>
  
  <pre><code>function border() {
      var el = document.getElementsByClassName("t1")[0];
       var el2 = document.getElementsByClassName("t2")[0];
      if (document.getElementById("one").checked) { 
  
          el.style.borderColor = "red";
          el.style.borderStyle = "solid";
             el2.style.borderColor = "";
          el2.style.borderStyle = "none";
      }
  
        else if (document.getElementById("two").checked) { 
         el.style.borderColor = "";
          el.style.borderStyle = "none";
          el2.style.borderColor = "red";
          el2.style.borderStyle = "solid";
      }
  
  }
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>Only 1st match team border gets selected, when I move to match 2 nothing happens(see img)</p>
  
  <p><em>Image</em></p>
  
  <p><img src="https://i.stack.imgur.com/hr9dG.png" alt="enter image description here"></p>