Mudar a cor do botão ao clicar e mostrar mensagem ao desclicar !

Olá, gostaria de fazer o seguinte tenho um código que tem vários botões, que quando clicado redireciona a outra pagina de formulário, gostaria de deixar esses botões ao clicar mudasse pra cor vermelha por exemplo e quando eu clicasse novamente voltasse para cor normal dele e desse uma caixa de mensagem !

Em anexo as telas !

Tela sacola.php

<?php session_start();
include_once 'includes/header.inc.php';
include_once 'includes/menu.inc.php';
?>

<!-- Formulário de Cadastro Cliente -->

 <div class="row container">
 <p>&nbsp;</p>
 <fieldset class="formulario" style="padding: 5px">
 <legend><img src="imagens/sacola.png" alt="[imagem]"style="width:80px; height:45px"></legend>
 <br>

 <?php
 if(isset($_SESSION['msg'])):
 echo $_SESSION['msg'];
 session_unset();
 endif;
 ?>

 <!-- Botões -->
 <div class="input-field col s12">
 <div class="linha1">
 <button id="botao" data-numero="01"class="btn blue" style="width:120px; height:37px">01</button>
 <button id="botao" data-numero="02"class="btn blue" style="width:120px; height:37px">02</button>
 <button id="botao" data-numero="03"class="btn blue" style="width:120px; height:37px">03</button>
 <button id="botao" data-numero="04"class="btn blue" style="width:120px; height:37px">04</button>
 <button id="botao" data-numero="05"class="btn blue" style="width:120px; height:37px">05</button>
 </div>

 <div class="linha2">
 <button id="botao" data-numero="06"class="btn blue" style="width:120px; height:37px">06</button>
 <button id="botao" data-numero="07"class="btn blue" style="width:120px; height:37px">07</button>
 <button id="botao" data-numero="08"class="btn blue" style="width:120px; height:37px">08</button>
 <button id="botao" data-numero="09"class="btn blue" style="width:120px; height:37px">09</button>
 <button id="botao" data-numero="10"class="btn blue" style="width:120px; height:37px">10</button>
 </div>

 <div class="linha3">
 <button id="botao" data-numero="11"class="btn blue" style="width:120px; height:37px">11</button>
 <button id="botao" data-numero="12"class="btn blue" style="width:120px; height:37px">12</button>
 <button id="botao" data-numero="13"class="btn blue" style="width:120px; height:37px">13</button>
 <button id="botao" data-numero="14"class="btn blue" style="width:120px; height:37px">14</button>
 <button id="botao" data-numero="15"class="btn blue" style="width:120px; height:37px">15</button>
 </div>

 <div class="linha4">
 <button id="botao" data-numero="16"class="btn blue" style="width:120px; height:37px">16</button>
 <button id="botao" data-numero="17"class="btn blue" style="width:120px; height:37px">17</button>
 <button id="botao" data-numero="18"class="btn blue" style="width:120px; height:37px">18</button>
 <button id="botao" data-numero="19"class="btn blue" style="width:120px; height:37px">19</button>
 <button id="botao" data-numero="20"class="btn blue" style="width:120px; height:37px">20</button>
 </div>
 </div>

 </fieldset>
 </div>

<?php include_once 'includes/footer.inc.php';?>
<?php include_once 'includes/script.inc.php';

	 

	 

	Tela emprestimo.php

	 

<?php session_start();
include_once 'includes/header.inc.php';
include_once 'includes/menu.inc.php';
?>

<!-- Formulário de Cadastro Cliente -->

 <div class="row container">
 <p>&nbsp;</p>
 <form action="banco_de_dados/create.php" method="post" class="col s12">
 <fieldset class="formulario" style="padding: 5px">
 <legend><img src="imagens/sacola.png" alt="[imagem]"style="width:80px; height:45px"></legend>
 <br>

 <?php
 if(isset($_SESSION['msg'])):
 echo $_SESSION['msg'];
 session_unset();
 endif;
 ?>

 <!-- Campo Nome -->
 <div class="input-field col s12">
 <i class="material-icons prefix">account_circle</i>
 <input type="text" name="nome" id="nome" maxlength="40" required autofocus>
 <label for="nome">Nome</label>
 </div>

 <!-- Campo Telefone -->
 <div class="input-field col s12">
 <i class="material-icons prefix">phone</i>
 <input type="text" name="telefone" id="telefone" maxlength="13" required>
 <label for="telefone">Telefone</label>
 </div>

 <!-- Campo Cpf -->
 <div class="input-field col s12">
 <i class="material-icons prefix">credit_card</i>
 <input type="text" name="cpf" id="cpf" maxlength="14" required>
 <label for="cpf"> CPF</label>
 </div>

 <!-- Campo Sacola -->
 <div class="input-field col s12">
 <i class="material-icons prefix">mode_edit</i>
 <label>Numero da Sacola</label>
 <input type="text" value="<?php echo isset($_GET['numeroSacola']) ? $_GET['numeroSacola'] : null; ?>">
 </div>

 <div class="input-field col s12">
 <i class="material-icons prefix">timelapse</i>
 <select>
 <option value="" disabled selected>Período</option>
 <option value="1">Manhã</option>
 <option value="2">Tarde</option>
 <option value="3">Noite</option>
 </select>
 </div>

 <!-- Botões -->
 <div class="input-field col s12">
 <input type="submit"style="width:120px; height:37px" value="Empréstimo" class="btn blue">
 <input type="submit"style="width:120px; height:37px" value="Devolução" class="btn red">
 <input type="reset" style="width:120px; height:37px" value="limpar" class="btn lilac">
 </div>

 </fieldset>
 </form>
 </div>

<?php include_once 'includes/script.inc.php';?>

	 

	 

	Código javascript

<!-- Arquivos Jquery e JavaScrip -->

 <script type="text/javascript" src="materialize/js/jquery-3.3.1.min.js"></script>
 <script type="text/javascript" src="materialize/js/materialize.min.js"></script>
 <script type="text/javascript" src="materialize/js/jquery.mask.min"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.3.1/jquery.maskedinput.min.js"></script>

 <!-- Inicialização Jquery -->
 <script type="text/javascript">
 $(document).ready(function(){
 $('.sidenav').sidenav();
 $('.dropdown-trigger').dropdown();
 });
 </script>

 <!-- Inicialização Jquery Mascaras -->
 <script type="text/javascript">
 jQuery.noConflict();
 jQuery(function($){
 //$("#datanasc").mask("99/99/9999");
 //$("#telefone").mask("(099)99999-9999");
 $("#cpf").mask("999.999.999-99");
 $("#cpfDono").mask("999.999.999-99");
 });

 document.addEventListener('DOMContentLoaded', function() {
 var elems = document.querySelectorAll('select');
 var instances = M.FormSelect.init(elems, options);
 });

 // Or with jQuery

 $(document).ready(function(){
 $('select').formSelect();
 });
 </script>

 <script>
 //pega todos os botoes
 const botoes = document.querySelectorAll('#botao');

 for (let i = 0; i < botoes.length; i++) {
 //escuta o evento de click em cada botao
 botoes[i].addEventListener('click', function (e) {
 //pega o numero do botao clicado
 const numeroSacola = this.dataset.numero;

 //redireciona para emprestimos.php passando o numero do botao
 window.location.href = `emprestimo.php?numeroSacola=${numeroSacola}`;
 });
 }
 </script>

 </body>
</html>