Скрыть JQuery css при нажатии кнопки

Question

У меня есть веб-сайт, который я хочу, когда кто-то нажимает на любую кнопку, появляется рамка на кнопке. Это мой 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, и я хочу, чтобы каждая кнопка имела границу, когда они активны (кто-то на них нажимает).

Answer 1

$('[id^=button]').css("border","none"); 

или

$('button').css("border","none"); 

, а затем

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

Answer 2

добавить эту строку $("#button1").css("border", "3px solid red"); ниже $("#button2").css("border", "3px solid red");