Replace string of class of button by class so that only one button is filled in using bootstrap buttons I'm using bootstrap buttons, and in this case I have 5 different buttons with 5 different classes. When one of the buttons is clicked on, I want it to be the only one filled in, and the others to only be the outline. Here is how I currently do it:



$(".canvas_btn").on("click",function(){
  for(var i = 0; i &lt; $(".canvas_btn").length; i++){
    document.getElementById($(".canvas_btn")[i].id).className = document.getElementById($(".canvas_btn")[i].id).className.replace("btn-outline-","btn-");
    document.getElementById($(".canvas_btn")[i].id).className = document.getElementById($(".canvas_btn")[i].id).className.replace("btn-","btn-outline-");
  }
  document.getElementById(this.id).className = document.getElementById(this.id).className.replace("btn-outline","btn");   
});
&lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;button class="btn btn-outline-info     canvas_btn" align="left"  id="new_text_btn"&gt;Text&lt;/button&gt;
&lt;button class="btn btn-outline-secondary  canvas_btn" align="left"  id="new_audio_btn"&gt;Audio&lt;/button&gt;
&lt;button class="btn btn-outline-success   canvas_btn" align="left"  id="new_image_btn"&gt;Image&lt;/button&gt;
&lt;button class="btn btn-outline-danger   canvas_btn" align="left"  id="new_video_btn"&gt;Video&lt;/button&gt;
&lt;button class="btn btn-outline-warning   canvas_btn" align="left"  id="new_input_btn"&gt;Input&lt;/button&gt;




It feels a bit odd the way I've done it - is there a more elegant way to do it? A way to use jQuery to make it tidier would be great!

I'm also not sure how I'm causing the error in the console - I think it's to do with the bootstrap script I call in, so don't know what I can do about that.
Here's how I refactored your code: 

$(document).ready(function () {

    $(".canvas_btn").on("click", function () {

        var idOfClickedElem = $(this).attr('id');
        $.each($('.canvas_btn'), function () {
            if (idOfClickedElem === $(this).attr('id')) {
                $(this).attr('class', getFilledClassName($(this).attr('class')))
            }
            else {
                $(this).attr('class', getOutlineClassName($(this).attr('class')))
            }
        });

    });

    function getOutlineClassName(currentClasses) {
        return currentClasses.replace("btn-outline-", "btn-").replace("btn-", "btn-outline-")
    }

    function getFilledClassName(currentClasses) {
        return currentClasses.replace("btn-outline", "btn")
    }


});


Instead of mixing jQuery and regular JavaScript selectors, I just used jQuery. I'm not a huge fan of the contents of getOutlineClassName(currentClasses) and getFilledClassName(currentClasses), but it's certainly less code than the way I probably would have written it if I had done so from scratch -- which would be to make a switch on the element's id and return the correct classes as a string accordingly.