I was learning DOM manipulation and I made 3 buttons that change their styles when clicked however I was wondering how I can make it so that when I click one of the buttons the others go back to their original white background style so that only 1 of these 3 buttons can stay clicked.
Sorry if I'm not explaining it right... I tried for a long time I googled a lot, something is not right with the logic I implemented probably. The idea is like I want it to be sorta checked like you can select only one of 3 buttons.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="center">
        <button class="buttons-for-the-books" id="testerbuton">Choose that one</button>
        <button class="buttons-for-the-books" id="testerbuton2">Choose that one</button> 
        <button class="buttons-for-the-books" id="testerbuton3">Choose that one</button>
        </div>
          <style>
          .buttons-for-the-books{
            border: 3px solid #191919;
            background-color: white;
            height:42px;
            margin:auto;
            cursor: pointer;
          }

        </style>
    <script>
// Button 1 
 var valueto = "off";
      var testerbutona = document.getElementById("testerbuton");
              testerbutona.addEventListener('click',function(){
              if(valueto === "off" && valueto2 === "off2" && valueto3 === "off3"){
              testerbutona.style.backgroundColor ="black";
              testerbutona.style.border ="3px solid white";
              testerbutona.style.color ="white";
              valueto = "on";
              }
              else if(valueto === "on" || valueto2 === "on2" || valueto3 ==="on3"){
                   testerbutona.style.backgroundColor ="white"; 
                  testerbutona.style.border ="3px solid black";
                   testerbutona.style.color ="black";
                    valueto = "off";                                  
                        }
            })
// Button 1 

// Button 2

var valueto2 = "off2";
      var testerbutona2 = document.getElementById("testerbuton2");

        testerbutona2.addEventListener('click',function(){
              if(valueto2 === "off2" && valueto === "off" && valueto3 === "off3"){
              testerbutona2.style.backgroundColor ="black";
              testerbutona2.style.border ="3px solid white";
              testerbutona2.style.color ="white";
              valueto2 = "on2";
              }
              else if(valueto2 === "on2" || valueto === "on" || valueto === "on3"){
                   testerbutona2.style.backgroundColor ="white"; 
                  testerbutona2.style.border ="3px solid black";
                   testerbutona2.style.color ="black";
                    valueto2 = "off2";                                  
                        }
            })

// Button 2

// Button 3
var valueto3 = "off3";
      var testerbutona3 = document.getElementById("testerbuton3");
              testerbutona3.addEventListener('click',function(){
              if(valueto3 === "off3" && valueto === "off" && valueto2 === "off2"){
              testerbutona3.style.backgroundColor ="black";
              testerbutona3.style.border ="3px solid white";
              testerbutona3.style.color ="white";
              valueto3 = "on3";
              }
              else if(valueto3 === "on3" || valueto === "on" || valueto2 === "on2"){
                   testerbutona3.style.backgroundColor ="white"; 
                  testerbutona3.style.border ="3px solid black";
                   testerbutona3.style.color ="black";
                    valueto3 = "off3";                                  
                        }
            })
// Button 3
    </script>

</html>
```