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. Below is how I currently do it:

$  (".canvas_btn").on("click",function(){   for(var i = 0; i < $  (".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");    });
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn btn-outline-info 	  	canvas_btn" align="left" 	id="new_text_btn">Text</button> <button class="btn btn-outline-secondary  canvas_btn" align="left" 	id="new_audio_btn">Audio</button> <button class="btn btn-outline-success 		canvas_btn" align="left" 	id="new_image_btn">Image</button> <button class="btn btn-outline-danger 		canvas_btn" align="left" 	id="new_video_btn">Video</button> <button class="btn btn-outline-warning 		canvas_btn" align="left" 	id="new_input_btn">Input</button>

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!

Btw, I’m 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.