Q:

Struggling with getting a value from a div that is clicked on

JS noob here. I've been spending the last couple of weeks reading JavaScript guides on Mozilla's site and doing some basic programming challenges on codewars, and have now decided to tackle my first simple project. I'm basically making a very simple color picker where you choose a red value, a green value, and a blue value, which will then be mixed together and the color produced will go in the square at the bottom. I've already done the HTML/CSS(although it isn't done very well) and this is what it looks like: http://imgur.com/LOG6Yvr
I'm trying to figure out how exactly I should use JavaScript to do this. One idea I had was to put an onclick attribute to each box and attach it to a function that would change the border of whatever one is clicked on, to give it the illusion of being selected. I managed to do that, but there were a couple of issues:

I'm not really sure how to only allow one box to be selected at a time (similar to radio buttons) in each row.
I'm not sure how to extract the value of the box(i.e. if the first box is clicked on the red row, I want to be able to get the value 0 for r).

Once I figure this out, I believe it will be simple to combine the values for each of the boxes clicked on and use a function to change the background color of the bottom box to the combination of the rgb values.
Any help would be very much appreciated. Just in case it would help, here is the code I've done so far:
HTML:
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>RGB Selector</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="shortcut icon" href="img/favicon.ico">
</head>

<body>
  <main>
    <div id="red">
      <div class="square sq0"><span>0</span></div>
      <div class="square sq1"><span>1</span></div>
      <div class="square sq2"><span>2</span></div>
      <div class="square sq3"><span>3</span></div>
      <div class="square sq4"><span>4</span></div>
      <div class="square sq5"><span>5</span></div>
      <div class="square sq6"><span>6</span></div>
      <div class="square sq7"><span>7</span></div>
      <div class="square sq8"><span>8</span></div>
      <div class="square sq9"><span>9</span></div>
      <div class="square sqA"><span>A</span></div>
      <div class="square sqB"><span>B</span></div>
      <div class="square sqC"><span>C</span></div>
      <div class="square sqD"><span>D</span></div>
      <div class="square sqE"><span>E</span></div>
      <div class="square sqF"><span>F</span></div>
    </div>
    <div id="green">
      <div class="square sq0"><span>0</span></div>
      <div class="square sq1"><span>1</span></div>
      <div class="square sq2"><span>2</span></div>
      <div class="square sq3"><span>3</span></div>
      <div class="square sq4"><span>4</span></div>
      <div class="square sq5"><span>5</span></div>
      <div class="square sq6"><span>6</span></div>
      <div class="square sq7"><span>7</span></div>
      <div class="square sq8"><span>8</span></div>
      <div class="square sq9"><span>9</span></div>
      <div class="square sqA"><span>A</span></div>
      <div class="square sqB"><span>B</span></div>
      <div class="square sqC"><span>C</span></div>
      <div class="square sqD"><span>D</span></div>
      <div class="square sqE"><span>E</span></div>
      <div class="square sqF"><span>F</span></div>
    </div>
    <div id="blue">
      <div class="square sq0"><span>0</span></div>
      <div class="square sq1"><span>1</span></div>
      <div class="square sq2"><span>2</span></div>
      <div class="square sq3"><span>3</span></div>
      <div class="square sq4"><span>4</span></div>
      <div class="square sq5"><span>5</span></div>
      <div class="square sq6"><span>6</span></div>
      <div class="square sq7"><span>7</span></div>
      <div class="square sq8"><span>8</span></div>
      <div class="square sq9"><span>9</span></div>
      <div class="square sqA"><span>A</span></div>
      <div class="square sqB"><span>B</span></div>
      <div class="square sqC"><span>C</span></div>
      <div class="square sqD"><span>D</span></div>
      <div class="square sqE"><span>E</span></div>
      <div class="square sqF"><span>F</span></div>
    </div>
    <div id="mixedColor"></div>
  </main>

  <script src="js/rgb.js"></script>
</body>

</html>

CSS:
* {
  color: #f0f0f0;
  font-family: 'Brandon Grotesque';
}

body {
  background: #222;
}

main {
  position: absolute;
  top: 50%;
  margin-top: -368px;
  left: 50%;
  margin-left: -536px;
}

.square {
  height: 65px;
  width: 65px;
  border: 1px solid #333;
  border-radius: .15em;
  margin-top: 100px;
  text-align: center;
  opacity: .9;
  transition: border .1s;
}

#red > .square {
  float: left;
  background: #f00;
}

#green > .square {
  float: left;
  background: #0f0;
}

#blue > .square {
  float: left;
  background: #00f;
}

.sq0 {
  clear: left;
  /*opacity: .1;*/
}

.square span {
  position: relative;
  top: -25px;
}

#mixedColor {
  width: 100px;
  height: 100px;
  background: #fff;
  float: left;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: 308px;
  border: 1px solid #333;
}

#red .sq0 { background: #000; }
#red .sq1 { background: #100; }
#red .sq2 { background: #200; }
#red .sq3 { background: #300; }
#red .sq4 { background: #400; }
#red .sq5 { background: #500; }
#red .sq6 { background: #600; }
#red .sq7 { background: #700; }
#red .sq8 { background: #800; }
#red .sq9 { background: #900; }
#red .sqA { background: #A00; }
#red .sqB { background: #B00; }
#red .sqC { background: #C00; }
#red .sqD { background: #D00; }
#red .sqE { background: #E00; }
#red .sqF { background: #F00; }

#green .sq0 { background: #000; }
#green .sq1 { background: #010; }
#green .sq2 { background: #020; }
#green .sq3 { background: #030; }
#green .sq4 { background: #040; }
#green .sq5 { background: #050; }
#green .sq6 { background: #060; }
#green .sq7 { background: #070; }
#green .sq8 { background: #080; }
#green .sq9 { background: #090; }
#green .sqA { background: #0A0; }
#green .sqB { background: #0B0; }
#green .sqC { background: #0C0; }
#green .sqD { background: #0D0; }
#green .sqE { background: #0E0; }
#green .sqF { background: #0F0; }

#blue .sq0 { background: #000; }
#blue .sq1 { background: #001; }
#blue .sq2 { background: #002; }
#blue .sq3 { background: #003; }
#blue .sq4 { background: #004; }
#blue .sq5 { background: #005; }
#blue .sq6 { background: #006; }
#blue .sq7 { background: #007; }
#blue .sq8 { background: #008; }
#blue .sq9 { background: #009; }
#blue .sqA { background: #00A; }
#blue .sqB { background: #00B; }
#blue .sqC { background: #00C; }
#blue .sqD { background: #00D; }
#blue .sqE { background: #00E; }
#blue .sqF { background: #00F; }

.square:hover {
  border: 1px solid #fff;
  cursor: pointer;
}

A:

If you ad an id to each of your divs   
function getColor(divIdToFind){
    div = document.getElementById(divIdToFind))
    div.style.backgroundColor
}

Or you could keep your html the same and use a variation using https://stackoverflow.com/a/3808886/3724365 to get it by class. personally I would rework it to use ids.

