动态更新div onclick

Question

我想通过点击框来动态更改框的边框。

这是我的两个方框的HTML：

<div id="twoBoxes">

    <div class="box1"  style="width:100px;height:100px;background:red" onclick="addBorder('box1')"></div>
    <br />
    <div class="box2" style="width:100px;height:100px;background:yellow" onclick="addBorder('box2')"></div>

</div>

这是函数addBorder

function addBorder (sq) {
        chosenSquare = sq;
        $('.' + chosenSquare).css("border", "black solid 4px");



}

所以正在发生的事情是在页面上有两个框，如果我点击其中一个，它将添加该边框。或者，应该没有任何事情发生

我尝试了什么：

- 我尝试将class = box1更改为id（两者都有） - 我已经尝试过控制台日志，看看它是否存储了正确的信息。 chosenSquare保存为所选框的类名

我尝试过“addClass()”代替".css()"

似乎div在我点击它时不想动态地动态改变。

供参考，以下是目前（不）正在做的事情：

https://jsfiddle.net/hh5u5dLa/

有人可以帮我吗？我错过了什么吗？