I'm trying to get my modal through Jquery, but it does not work, the idea is that by pressing the "btnmodal" button the modal appears through Jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title>CRUD Mascotas</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnmodal').click(function(){
$('#modal').modal('show');
});
});
</script>
</head>
<body>
<div class="container">
<div align="center" class="starter-template">
<h1 align= "center"><b>CRUD CON AJAX</b></h1>
<button type="button" id="btnmodal" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>Nuevo
</button>
</div>
<div class="panel panel-default">
<div class="panel-heading">Lista de mascotas</div>
<table class="table">
<thead>
<tr>
<th>ID Mascota</th>
<th>Nombre</th>
<th>Fecha De Nacimiento</th>
<th>Raza</th>
<th>Especie</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<?php
$conexion = mysqli_connect("localhost","root","","crud-ajax");
$resultado = mysqli_query($conexion,"SELECT * FROM MASCOTA");
while($filas=mysqli_fetch_array($resultado))
{ ?>
<tr>
<td><?php echo $filas['idmascota']; ?></td>
<td><?php echo $filas['nombre']; ?></td>
<td><?php echo $filas['fechanacimiento']; ?></td>
<td><?php echo $filas['raza']; ?></td>
<td><?php echo $filas['especie']; ?></td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-danger">Seleccione</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a>Eliminar</a></li>
<li><a>Actualizar</a></li>
</ul>
</div>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Registrar Mascota</h4>
</div>
<form role="form" action="" name="frmMascotas" onsubmit="Registrar(); return false">
<div class="col-lg-12">
<div class="form-group">
<label>ID Mascota</label>
<input name="ID" class="form-control" required>
</div>
<div class="form-group">
<label>Nombre</label>
<input name="Nombre" class="form-control" required>
</div>
<div class="form-group">
<label>Fecha De Nacimiento</label>
<input name="Fecha" class="form-control" required>
</div>
<div class="form-group">
<label>Raza</label>
<input name="Raza" class="form-control" required>
</div>
<div class="form-group">
<label>Especie</label>
<input name="Especie" class="form-control" required>
</div>
<button type="submit" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Registrar
</button>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-circle" data-dismiss="modal"><i class="fa fa-times"></i>x</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>