I have a navigation bar with a button that is supposed to open a modal when clicked. I've tried following the guidance from Bootstrap's documentation and even checked out this question: bootstrap modal not working at all
Unfortunately, nothing seems to be working so far, and there are no errors showing up in the console.
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Legion Analytics</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class = "bg-light">
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-brand mb-0 h1 text-center">Legion Analytics</span>
<div class="form-inline my-2 my-lg-0">
<button class="btn btn-warning my-2 my-sm-0" id='open-modal-btn' data-toggle="modal" data-target="#update-modal">Update DB</button>
</div>
</nav>
<div class="modal fade" id="update-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST" enctype="multipart/form-data" id="turvo-upload">
<div class="file-upload-wrapper">
<label for="file">Upload new Turvo Data</label>
<input type="file" name="turvo-upload-file" class="form-control-file" id="excel-upload-file">
<button class="btn btn-outline-success" type="button" id="submit_turvo" method="POST" style="margin-top: 30px">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" id = "db_spinner_table"></span>
Submit File
</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
{% include 'rate_analysis.html' %}
{% include 'rate_engine.html' %}
</div>
<script src="{{ url_for('static', filename='js/jquery-1.11.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/plots.js') }}"></script>
</body>
</html>