如何使用css和/或javascript动态更改样式

我有一个按钮，我需要改变一些风格时，点击它。我可能可以通过一些类的添加和删除来轻松实现这一点，但是我在页面运行时更改了第一个元素，所以现在我需要从第一个元素中删除样式并将其应用到单击的按钮上，但我实际上不知道如何使其成为第n个子元素（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 -->

你可以用这个绑定。如果

$parent.selectedOption（）==key

const model=function（）{
const self=这个；
const options=[{key:“一”}，{key:“二”}，{key:“三”}]；
self.optionValues=ko.可观察（选项）；
self.selectedOption=ko.observable（选项[0].key）；
}
ko.applyBindings（新型号）

.voltage{
颜色：红色
}

我尝试了这个，但没有在我的项目上工作。我得到“错误，您不能对同一个元素多次应用绑定”@MateusFernando，还有其他错误。这在代码段中效果很好。也许一些js/jquery专用解决方案可以更好地帮助我，因为我无法更改ko代码。。。

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;
}