JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <body>
    <div class="btn-group" data-toggle="buttons">
      <span id=car></span>
    </div>
  </body>

</html>

CSS

.radio-toolbar input[type="radio"] {
  display: none;
}

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

.radio-toolbar input[type="radio"]:checked {
  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 input = document.createElement('input');
  var input_label = document.createElement('label');

  input.type = 'radio';
  input.name = 'radio-btn';
  input.id = 'radio' + i;
  input.value = "true";
  input_label.innerHTML = array[i];
  input_label.addEventListener('click', function(element) {
      document.querySelectorAll('.radio-toolbar label').forEach((labelEl) => {
      	labelEl.selected = false;
        labelEl.style.backgroundColor = '#ddd';
      });
			element.selected = true;
      element.style.backgroundColor = 'red';
    }.bind(this, input_label));

  input_label.setAttribute("class", "btn btn-primary");
  input_label.appendChild(input);
  


  item.appendChild(input_label);
  document.getElementById("car").appendChild(item);
}