JSFiddle - React, Tailwind, and code Playground

by doctor23

HTML

<div class="location__city">
      <button id="chelyabinsk" class="btn-city" onclick="return false">Челябинск</button>
      <button id="ekaterinburg" class="btn-city" onclick="return false">Екатеринбург</button>
      <button id="magnitogorsk" class="btn-city" onclick="return false">Магнитогорск</button>
      <button id="ufa" class="btn-city" onclick="return false">Уфа</button>
      <button id="kurgan" class="btn-city" onclick="return false">Курган</button>
      <button id="zlatoust" class="btn-city" onclick="return false" style="margin-right: 0;">Златоуст</button>
      <button id="surgut" class="btn-city" onclick="return false">Сургут</button>
      <button id="orsk" class="btn-city" onclick="return false">Орск</button>
    </div>
    
    
    <div class="form-group required row-shipping_address_city">
    <label class="control-label col-sm-4" for="shipping_address_city">Если Вы находитесь в другом городе, пожалуйста, напишите его название (без указания адреса)</label>
    <div class="col-sm-8">
              <input class="form-control" type="text" name="shipping_address[city]" id="shipping_address_city" value="" placeholder="Введите город" data-onchange="reloadAll">
                    <div class="simplecheckout-rule-group" data-for="shipping_address_city">
                      <div style="display:none;" data-for="shipping_address_city" data-rule="byLength" class="simplecheckout-error-text simplecheckout-rule" data-length-min="2" data-length-max="128" data-required="true">Город должен быть от 2 до 128 символов!</div>
                  </div>
                </div>
 </div>

CSS

.btn-green {
  background: green;
  color: white;
}

JavaScript

function foo() {
  let btn = document.querySelectorAll('.btn-city');
  let input = document.querySelector('#shipping_address_city');

  // Развешиваем событие клика на кнопки
  for (let i = 0; i < btn.length; i++) {
    btn[i].addEventListener('click', function() {
      // При клике на кнопку записываем ее значение в инпут
      input.value = this.innerText;
    });
  }

}


foo();

var buttons = document.querySelectorAll(".btn-city");
for (button in buttons) {
  buttons[button].onclick = function() {
    console.log('test')
    var yellowButton = document.querySelectorAll(".btn-green")[0];
    if (this.className == "btn-city") {
      if (yellowButton) yellowButton.className = "btn-city";
      this.className = "btn-green";
    }
  }
}