JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>

<div class="btn-group" data-toggle="buttons">
<p><span id=predictions-farbe></span></p>
</div>


</body>
</html>

CSS

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar .red {
  background-color: red;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}

JavaScript

var array = ["Saab", "Volvo", "BMW"];
var item = document.createElement('div');
item.className = 'radio-toolbar';

for (var i = 0; i < array.length; i++) {
    //var node = document.createElement("LI");
		var input = document.createElement('input');
		var input_label = document.createElement('label');
    //var textnode = document.createElement("p");
    //textnode.innerHTML = "water";
    input.type = 'radio';
    input.name = 'fancy';
    input.id = i;
    //input.innerHTML = '<input type="radio" id="radio1" name="radios" value="all" checked>'
    input_label.for = i;
    input_label.innerHTML = input.name;//"All"
    
    
    //item.appendChild(input);
    item.appendChild(input_label);

    document.getElementById("predictions-farbe").appendChild(item);
}


document.addEventListener('click', function(event) {
      document.querySelectorAll('.radio-toolbar label').forEach((labelEl) => {
        labelEl.selected = false;
        labelEl.className='';
      });
      
      event.target.selected = true;
      event.target.className = 'red';
    });