buttons that change color based on other buttons

I am trying to modify my program so that when one of four buttons is clicked, the other three buttons get unclicked, but I am not sure what to do.

In my program, there are 16 pixels, and each pixel can be set to either 00, 01, 10, or 11. Then the correct value is output to an array, which can be logged to the console or saved in a file. I am able to click and unclick the pixels and change the values sent to the array, but I can not figure out how to change the color of other buttons in a group based on one of the buttons in a group. Is there some sort of way to make a color for button groups based on maybe the action taken in one of the buttons? Any suggestions even if not code, would be helpful. (eventually I will have 512 of these pixels). Thanks!

Here is the fiddle as the code is long: https://jsfiddle.net/q6rwfvua/

<div class="row">
    <div class="col"> Pixel 1
        <div class="row"><div class="btn-group-vertical-sm">
                <button name="myBtn" data-num="0" id="b1"> 00</button>
                <button name="myBtn1" data-num="0" id="b1"> 01</button>
            </div></div>
        <div class="row"><div class="btn-group-vertical-sm">
                <button name="myBtn2" data-num="0" id="b1"> 10</button>
                <button name="myBtn3" data-num="0" id="b1"> 11</button>
            </div></div>
    </div> <!--end of col -->

This answer may seem long for what could be a short reply but I want to introduce a few new concepts that might help your front-end development in the long run. It uses a loop to create the markup (particularly useful if you're creating 512 boxes!), and shortens the JavaScript code by using a couple of nice DOM methods.

First let's examine your core HTML for each "box" (comprises the label and the set of buttons). At the moment it's four nested divs with the four buttons separated into two sections.

Buttons have a name, an id, and a data attribute. We can pare that back to just one data attribute for the number that button represents, and move the group id to the parent element. This saves a little space/clutter, and makes the HTML easier to work with. For each "box" we end up with this:

<div class="box" data-id="1">
  <span>Pixel 1</span>
  <div class="buttons">
    <button data-num="0">00</button>
    <button data-num="1">01</button>
    <button data-num="2">10</button>
    <button data-num="3">11</button>
  </div>
</div>

As you'll see in the example we can use this structure to our advantage. To save a lot of HTML real estate we can use a loop to create all of the boxes using a template/string literals.

Looping and using a template string is the first concept.

The second concept is event delegation. Instead of attaching event listeners to all of the elements we can judiciously add one to main parent container and have that catch events from its child elements as they "bubble up" the DOM. This applies to the control buttons (ie "Set all to 2") as well.

When the listener catches an event first it checks to see if its from a child element that we're interested in processing (ie from a button), and then the code in the handler can work on what do with the information it can get from the button, and it's parent "box" element.

In this case it will grab the num value from its dataset, and then find its closest "box" parent element and grab its pixelId value from its data attribute. From there it can get its immediate parent (the element with the buttons class), and then grab all of that element's buttons.

Then based on the num value we can start adding/removing a "green" classe from the those buttons as we iterate over them.

Finally, once that's complete, we can update the pixels array using the pixelId value for the index to store the num value.

These are alterations you can make to your code/markup relatively easily. The rest of this just pertains to changes you might make to the CSS.

(The CSS I've introduced here is CSS Grid and Flexbox. They just make working with a layout such as yours a little easier with very little extra overhead.)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Cache the grid element, and add
// an event listener to it
const grid = document.querySelector('.grid');
grid.addEventListener('click', handleGrid);

// Cache the controls element, and add
// an event listener to it
const controls = document.querySelector('.controls');
controls.addEventListener('click', handleControls);


// Create an array with 16 spaces each
// filled with zero 
const pixels = new Array(16).fill(0);

// Array to cache the HTML as its built
const html = [];

// Iterate from 0 to 15, and on each iteration
// create a template string that holds the HTML
// for one "box" - a box holds the box title
// (ie "Pixel 1", and a group of four boxes)
// The element with the box class holds the "id" data attribute
// which we'll use to target the index of the pixels
// array, and each button has a "num" data attribute
// which we use to populate the pixel array at the right index
for (let i = 0; i < 16; i++) {
  const pixel = `
    <div class="pixel" data-id="${i}">
      <span>Pixel ${i + 1}</span>
      <div class="buttons">
        <button data-num="0">00</button>
        <button data-num="1">01</button>
        <button data-num="2">10</button>
        <button data-num="3">11</button>
      </div>
    </div>
  `;
  
  // On each iteration we push that string into
  // the html array
  html.push(pixel);
}

// Once the iteration is complete join up the
// array into one HTML string and assign it to the
// innerHTML of the grid element
grid.innerHTML = html.join('');


// When the grid element catches an event from one
// of its child elements it...
function handleGrid(e) {
  
  // 1) Checks that it's a button element
  if (e.target.matches('button')) {
    
    // Takes the "id" from box's data attribute, and the
    // "num" from the button's data attribute
    const pixelId = Number(e.target.closest('.pixel').dataset.id);
    const num  = Number(e.target.dataset.num);
    
    // Caches the button's closest element with
    // the "buttons" class (ie its parent element), and
    // selects all of the parent's child buttons
    const parent = e.target.closest('.buttons');
    const buttons = parent.querySelectorAll('button');
    
    // Loops over each button removing the colour classes.
    buttons.forEach(button => {
      button.classList.remove('green', 'red');
    });
    
    // Change the class for the clicked element
    if (num === 0) {
      e.target.classList.add('red');
    } else {
      e.target.classList.add('green');
    }

    // Update the pixel array! If the clickded button's
    // number is greater than zero set the value at the
    // index specified by the pixelId to the number, otherwise
    // set it to zero
    pixels[pixelId] = num > 0 ? num: 0;
    
    console.log(JSON.stringify(pixels));

  }

}

// Handler gets the number from the control button
// removes all the green classes from all the buttons,
// and then applies the class to all the buttons that match
// the number
function handleControls(e) {
  
  if (e.target.matches('button')) {
    
    const num = Number(e.target.dataset.num);    
    
    const allButtonSelector = '.buttons button';
    const allButtons = grid.querySelectorAll(allButtonSelector);
    
    allButtons.forEach(button => {
      button.classList.remove('green')
    });
    
    const singleButtonSelector = `button[data-num="${num}"]`;
    const singleButtons = grid.querySelectorAll(singleButtonSelector);
    
    singleButtons.forEach(button => {
      button.classList.add('green');
    });
  
  }

}

<!-- language: lang-css -->

.grid, .buttons { display: grid; width: fit-content; height: fit-content; }
.grid { grid-template-rows: 60px 1fr; gap: 15px; grid-auto-flow: column; width: 580px; }
.buttons { margin-top: 0.25rem; grid-template-columns: 22px 1fr; gap: 3px; grid-auto-flow: row; aspect-ratio: 1; width: fit-content; }
.buttons button { display: flex; justify-content: center; align-items: center; width: 22px; }
.buttons button:hover { cursor: pointer; }
.box { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.green, .red { color: white; }
.red { background-color: red; }
.green { background-color: green; }
.controls { margin-top: 1rem; }
.controls button { margin-left: 0.25rem; }
.as-console-wrapper { max-height: 20px !important; bottom: 0; }

<!-- language: lang-html -->

<section class="grid"></section>
<section class="controls">
  <button data-num="0">Set all to 0</button>
  <button data-num="1">Set all to 1</button>
  <button data-num="2">Set all to 2</button>
  <button data-num="3">Set all to 3</button>
</section>

<!-- end snippet -->