如何使用CSS和/或JavaScript动态更改样式

Question

我有一个按钮，单击该按钮时需要更改某些样式。我大概可以通过一些类的添加和删除轻松地做到这一点，但是我在页面运行时更改了第一个元素，所以现在我需要从第一个元素中删除样式并将其应用到单击的按钮上，但实际上并没有我怎样才能使它成为nth-child（1）的原因。有人可以帮忙吗？

这是我的html：

<tr>

<!-- ko foreach: optionValues -->

<td>

    <input type="radio" id="volt" name="volt"

        data-bind="attr: {id: 'CC-prodDetails-' + $data.value}, value: $parent.selectedOption">

    <button data-bind="attr: {for: 'CC-prodDetails-' + $data.value}, text:key, 

                                                click:function(key){

                                                    $parent.selectedOption(key);

                                                    $parent.selectedOptionValue(key);

                                                }" class="voltagem"></button>

</td>

<!-- /ko -->

那就是我的CSS：

input {

  display: none;

}

.voltagem {

  font-size: 20px;

  border-color: #333;

  border-radius: 10px;

  border-style: dotted;

  margin-left: 25px;

  height: 55px;

  width: 135px;

  background-color: transparent;

}

.voltagem:focus {

  border-color: blue;

  border-style: solid;

  outline: none;

}

td:nth-child(1) .voltagem {

  border-color: blue;

  border-style: solid;

  outline: none;

}