I'm trying to make a simple color picker and have a problem. Here is codepen [link with the code][1]. I want to show information about color into the 'info' section of that 'square' which was pressed. Now, when I click the 'square', information shows in every 'info' sections. Please give me an advice 

```js
var squares = document.querySelectorAll('.square');
for (var i = 0; i < squares.length; i++) {
  var square = squares[i];

  square.addEventListener('click', function() {
    var a = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    var c = Math.floor(Math.random() * 256);
    var rgbColor = "rgb(" + a + ", " + b + ", " + c + ")";
    this.style.backgroundColor = rgbColor;
    var infos = document.querySelectorAll('.info')
    for (var i = 0; i < infos.length; i++){
      var info = infos[i];
      info.innerHTML = rgbColor;
    }
  });
}
```

```css
.square {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  float: left;
}

.info {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

```html
<div class='square'></div>
<div class='info'></div>
<div class='square'></div>
<div class='info'></div>
```