Javascript 单击按钮时隐藏JQuery css

我有一个网站，我想当有人点击任何按钮，按钮边框显示。这是我的JS：

$(document).ready(function() {

 $("#button1").on('click', function () {
var targetEl = $(this).data('target');
$.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
    $('.' + targetEl).fadeIn();
    $( "#button1" ).css( "border", "3px solid red" );

});

});

});


$(document).ready(function() {

 $("#button2").on('click', function () {
var targetEl = $(this).data('target');
$.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
    $('.' + targetEl).fadeIn();
    $( "#button2" ).css( "border", "3px solid red" );

});

});

 });

当我点击按钮1时，边框显示出来，这很好
但是，当我单击按钮2时，我希望按钮1的边框消失（单击其他按钮时隐藏）。以此类推，我在我的网站上有9个按钮，我给了它们所有的ID，我希望每个按钮在激活时都有一个边框（有人点击它们）

或

然后

$( "#button2" ).css( "border", "3px solid red" );

---

添加此行

$（“#按钮1”）.css（“边框”，“3px实心红色”）下面
$（“#按钮2”）.css（“边框”，“3px实心红色”）
顺便说一句，当我点击按钮2时，按钮1的边框仍然在按钮1上。
$('button').css("border","none");

$( "#button2" ).css( "border", "3px solid red" );