title: How to make upper and lower buttons different photos js
body: <p>what I'm trying to do is briefly this. There is a photo at the top. There are 10 buttons at the bottom. There are 7 buttons below them.
  I want something that starts onclick = onFirstButtonClick == onSecondButtonClick and continues until onSecondButtonClick7 goes. After clicking on the first of the upper buttons, the upper 1st / lower 1st button from the lower buttons, such as the upper 1st / lower 2nd button. But the top first button and the second top button should all open a different bottom button.
  When one of the first ten buttons is clicked, one button should be selected from the bottom, and I'm trying to mark it so that both are active, but I can't. Thank you.</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>var firstButtonPressed = false;
      function onFirstButtonClick() {
      firstButtonPressed = true;
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1000/1000color.png'    
  }
  var firstButtonPressed1 = false;
      function onFirstButtonClick1() {
      firstButtonPressed1 = true;
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1100/1100color.png'
  }
  var firstButtonPressed2 = false;
        function onFirstButtonClick2() {
      firstButtonPressed2 = true;
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1200/1200color.png'
  }
  var firstButtonPressed3 = false;
          function onFirstButtonClick3() {
          firstButtonPressed3 = true;
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1300/1300color.png' 
  }
  var firstButtonPressed4 = false;
          function onFirstButtonClick4() {
      firstButtonPressed4 = true;
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1400/1400color.png'  
  }
  var firstButtonPressed5 = false;
          function onFirstButtonClick5() {
      firstButtonPressed5 = true;
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1500/1500color.png'
  }
  var firstButtonPressed6 = false;
          function onFirstButtonClick6() {
      firstButtonPressed6 = true;
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1600/1600color.png'
  }
  
  var firstButtonPressed11 = false;
          function onFirstButtonClick11() {
      firstButtonPressed11 = true;
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1700/1700color.png'
  }
  var firstButtonPressed12 = false;
          function onFirstButtonClick12() {
        firstButtonPressed12 = true;
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1800/1800color.png'   
  }
  var firstButtonPressed23 = false;
          function onFirstButtonClick23(){
        firstButtonPressed23 = true;
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1900/1900color.png'   
  }
          function onSecondButtonClick() {
      if(firstButtonPressed){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1000/1.png'
      firstButtonPressed = false;
  }   else if(firstButtonPressed1){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1100/1.png'
      firstButtonPressed1 = false;
  }   else if (firstButtonPressed2){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1200/1.png'
      firstButtonPressed2 = false;
  }   else if (firstButtonPressed3){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1300/1.png'
      firstButtonPressed3 = false;
  }   else if (firstButtonPressed4){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1400/1.png'
      firstButtonPressed4 = false;
  }   else if (firstButtonPressed5){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1500/1.png'
      firstButtonPressed5 = firstAttempt; 
  }   else if (firstButtonPressed6){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1600/1.png'
      firstButtonPressed6 = firstAttempt; 
  }   else if (firstButtonPressed11){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1700/1.png'
      firstButtonPressed11 = firstAttempt;
  }   else if (firstButtonPressed12){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1800/1.png'
      firstButtonPressed12 = false;
  }   else if (firstButtonPressed23){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1900/1.png'
      firstButtonPressed23 = false;
  }
  }
          function onSecondButtonClick2() {
          if(firstButtonPressed) {
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1000/2.png'
      firstButtonPressed = false;
  }   else if(firstButtonPressed1){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1100/2.png'
      firstButtonPressed1 = false;
  }     else if (firstButtonPressed2){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1200/3.png'
      firstButtonPressed2 = false;
  }   else if (firstButtonPressed3){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1300/2.png'
      firstButtonPressed3 = false;
  }     else if (firstButtonPressed4){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1400/2.png'
      firstButtonPressed4 = false;
  }     else if (firstButtonPressed5){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1500/2.png'
      firstButtonPressed5 = false;
  }   else if (firstButtonPressed6){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1600/2.png'
      firstButtonPressed6 = false;
  }   else if (firstButtonPressed11){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1700/2.png'
      firstButtonPressed11 = false;
  }   else if (firstButtonPressed12){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1800/2.png'
      firstButtonPressed12 = false;
  }   else if (firstButtonPressed23){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1900/2.png'
      firstButtonPressed23 = false;
  }
  }
          function onSecondButtonClick3() {
      if(firstButtonPressed) {
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1000/3.png'
      firstButtonPressed = false;
  }   else if(firstButtonPressed1){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1100/3.png'
      firstButtonPressed1 = false;
  }   else if (firstButtonPressed2){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1200/3.png'
      firstButtonPressed2 = false;
  }     else if (firstButtonPressed3){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1300/3.png'
      firstButtonPressed3 = false;
  }   else if (firstButtonPressed4){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1400/3.png'
      firstButtonPressed4 = false;
  }   else if (firstButtonPressed5){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1500/3.png'
      firstButtonPressed5 = false;
  }   else if (firstButtonPressed6){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1600/3.png'
      firstButtonPressed6 = false;
  }     else if (firstButtonPressed11){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1700/3.png'
      firstButtonPressed11 = false;
  }   else if (firstButtonPressed12){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1800/3.png'
      firstButtonPressed12 = false;
  }     else if (firstButtonPressed23){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1900/3.png'
      firstButtonPressed23 = false;
  }
  }
          function onSecondButtonClick4() {
      if(firstButtonPressed) {
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1000/4.png'
      firstButtonPressed = false;
  }     else if(firstButtonPressed1){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1100/4.png'
      firstButtonPressed1 = false;
  }     else if (firstButtonPressed2){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1200/4.png'
      firstButtonPressed2 = false;
  }     else if (firstButtonPressed3){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1300/4.png'
      firstButtonPressed3 = false;
  }   else if (firstButtonPressed4){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1400/4.png'
      firstButtonPressed4 = false;
  }   else if (firstButtonPressed5){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1500/4.png'
      firstButtonPressed5 = false;
  }   else if (firstButtonPressed6){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1600/4.png'
      firstButtonPressed6 = false;
  }     else if (firstButtonPressed11){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1700/4.png'
      firstButtonPressed11 = false;
  }     else if (firstButtonPressed12){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1800/4.png'
      firstButtonPressed12 = false;
  }     else if (firstButtonPressed23){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1900/4.png'
      firstButtonPressed23 = false;
  }
  }
          function onSecondButtonClick5() {
      if(firstButtonPressed) {
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1000/5.png'
      firstButtonPressed = false;
  }   else if(firstButtonPressed1){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1100/5.png'
      firstButtonPressed1 = false;
  }     else if (firstButtonPressed2){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1200/5.png'
      firstButtonPressed2 = false;
  }     else if (firstButtonPressed3){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1300/5.png'
      firstButtonPressed3 = false;
  }     else if (firstButtonPressed4){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1400/5.png'
      firstButtonPressed4 = false;
  }     else if (firstButtonPressed5){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1500/5.png'
      firstButtonPressed5 = false;
  }     else if (firstButtonPressed6){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1600/5.png'
      firstButtonPressed6 = false;
  }     else if (firstButtonPressed11){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1700/5.png'
      firstButtonPressed11 = false;
  }     else if (firstButtonPressed12){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1800/5.png'
      firstButtonPressed12 = false;
  }     else if (firstButtonPressed23){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1900/5.png'
      firstButtonPressed23 = false;
  }
  }
          function onSecondButtonClick6() {
      if(firstButtonPressed) {
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1000/6.png'
      firstButtonPressed = false;
  }     else if(firstButtonPressed1){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1100/6.png'
      firstButtonPressed1 = false;
  }     else if (firstButtonPressed2){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1200/6.png'
      firstButtonPressed2 = false;
  }   else if (firstButtonPressed3){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1300/6.png'
      firstButtonPressed3 = false;
  }     else if (firstButtonPressed4){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1400/6.png'
      firstButtonPressed4 = false;
  }     else if (firstButtonPressed5){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1500/6.png'
      firstButtonPressed5 = false;
  }     else if (firstButtonPressed6){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1600/6.png'
      firstButtonPressed6 = false;
  }     else if (firstButtonPressed11){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1700/6.png'
      firstButtonPressed11 = false;
  }     else if (firstButtonPressed12){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1800/6.png'
      firstButtonPressed12 = false;
  }     else if (firstButtonPressed23){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1900/6.png'
      firstButtonPressed23 = false;
  }
  }
          function onSecondButtonClick7() {
      if(firstButtonPressed) {
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1000/7.png'
      firstButtonPressed = false;
  }     else if(firstButtonPressed1){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1100/7.png'
      firstButtonPressed1 = false;
  }     else if (firstButtonPressed2){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1200/7.png'
      firstButtonPressed2 = false;
  }     else if (firstButtonPressed3){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1300/7.png'
      firstButtonPressed3 = false;
  }     else if (firstButtonPressed4){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1400/7.png'
      firstButtonPressed4 = false;
  }     else if (firstButtonPressed5){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1500/7.png'
      firstButtonPressed5 = false;
  }     else if (firstButtonPressed6){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1600/7.png'
      firstButtonPressed6 = false;
  }     else if (firstButtonPressed11){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1700/7.png'
      firstButtonPressed11 = false;
  }     else if (firstButtonPressed12){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1800/7.png'
      firstButtonPressed12 = false;
  }     else if (firstButtonPressed23){
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/1900/7.png'
      firstButtonPressed23 = false;
  }
  }
          function firstAttempt(){
      firstButtonPressed3 = false;
      document.getElementById("myImage").src='/Users/Hp/Desktop/rr3/2000/2000color.png'
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.div {
    display: block;
    justify-content: stretch;
  }
  .p3, .p1{
    font-family: 'Montserrat';font-size: 22px;
  }
  .button {
    font-family: 'Montserrat';font-size: 14px;
    background-color: #FFFFFF;
    border: none;
  }
  .button:focus{
      border: 2px solid ;
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .button:active{
      border: 2px solid ;
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .button2 {background-color: #FFFFFF;
    } /* Blue */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'&gt;
    
  &lt;body&gt;
  &lt;img id="myImage" onclick="firstAttempt()" width="950" height="auto"&gt;
  
  &lt;p class="p3"&gt;&lt;u&gt;Color&lt;/u&gt; Structure: &lt;/p&gt;
  &lt;button class="button button2 " onclick="onFirstButtonClick()"&gt; &lt;img src="/Users/Hp/Desktop/rr3/1000/1013.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;R20&lt;/button&gt;
  &lt;button class="button button2 " onclick="onFirstButtonClick1()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/1000/7016.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;RA6&lt;/button&gt;
  &lt;button class="button button2" onclick="onFirstButtonClick2()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/1000/1035.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;R7L&lt;/button&gt;
  &lt;button class="button button2" onclick="onFirstButtonClick3()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/1000/7106.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;R755&lt;/button&gt;
  &lt;button class="button button2" onclick="onFirstButtonClick4()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/1000/7421.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;R71&lt;/button&gt;
  &lt;button class="button button2" onclick="onFirstButtonClick5()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/1000/8019.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;RA9&lt;/button&gt;
  &lt;button class="button button2" onclick="onFirstButtonClick6()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/1000/9003f.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;R03&lt;/button&gt;
  &lt;button class="button button2" onclick="onFirstButtonClick11()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/1000/9005.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;RA5&lt;/button&gt;
  &lt;button class="button button2" onclick="onFirstButtonClick12()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/1000/9005f.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;RMF&lt;/button&gt;
  &lt;button class="button button2" onclick="onFirstButtonClick23()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/1000/7016mf.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;RF&lt;/button&gt;
  
  &lt;p class="p1"&gt;&lt;u&gt;Fabric &lt;/u&gt;Color: &lt;/p&gt;
  &lt;button class="button button2 active" onclick="onSecondButtonClick()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/kms/1.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;RL1&lt;/button&gt;
  &lt;button class="button button2" onclick="onSecondButtonClick2()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/kms/2.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;RL7&lt;/button&gt;
  &lt;button class="button button2" onclick="onSecondButtonClick3()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/kms/3.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;RL3&lt;/button&gt;
  &lt;button class="button button2" onclick="onSecondButtonClick4()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/kms/4.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;RL6&lt;/button&gt;
  &lt;button class="button button2" onclick="onSecondButtonClick5()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/kms/5.png"width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;RL2&lt;/button&gt;
  &lt;button class="button button2" onclick="onSecondButtonClick6()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/kms/6.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;RL8&lt;/button&gt;
  &lt;button class="button button2" onclick="onSecondButtonClick7()"&gt;&lt;img src="/Users/Hp/Desktop/rr3/kms/7.png" width="35px" height="35px"&gt;&lt;br&gt;&lt;br&gt;RL0&lt;/button&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>