This is my code which is working fine on localhost but not working on hosting.
{% extends 'layout2.html' %}
{% block content %}
<div class="container">
<div class="row">
<ol class="col-12 breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
<li class="breadcrumb-item active">Menu</li>
</ol>
<div class="col-12">
<h5 style="font-size: 30px">Menu</h5>
<hr>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm">
<!-- card start -->
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../static/images/cake.jpeg" alt="Cake" style="width:100%;height: 185px;">
<div class="card-body">
<h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">Rs.250</span></h5>
<h2></h2>
<p class="card-text">Different varities of cakes. With customized design. You can select you own flavour. Click below to view details and order.</p>
<a href="#" data-toggle="modal" data-target="#myModal" class="btn btn-primary" style="width: 100%"> View Details</a>
<!-- <button type="button" class="btn btn-info btn-lg" >Open Modal</button> -->
<!-- Modal-1 -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Order cake now.</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<img src="../static/images/cake.jpeg" alt="" style="widows: 100px;height: 185px;">
</div>
<div class="col-md-8">
<address >
<h6> Product Name: Cake</h6>
<h6> Product Flavour: customized</h6>
<h6> Product category: Best seller</h6>
<hr>
<h6> Availible in both veg and non-veg.</h6>
<h6> Weight of cake is as per customer reqirement.</h6>
<h6> You can place order below.</h6>
</address>
</div>
</div>
<hr>
<form action="{% url 'home' %}" method="POST">
{% csrf_token %}
<div class="form-row">
<div class="col-md-6">
<label>Customer Name</label>
<input type="text" placeholder="Full Name" class="form-control" name="name" required>
</div>
<div class="col-md-6"> <label>Email</label>
<input type="email" placeholder="@gmail.com" class="form-control" name="email" required></div>
</div>
<div class="form-row">
<div class="col-md-6">
<label>Product name</label>
<input type="text" placeholder="Cake" value="cake" class="form-control" name="product" readonly>
</div>
<div class="col-md-6"> <label>Select category</label><br>
<select name="category" id="" style="width:180px">
<option value="Veg">Veg</option>
<option value="Non-veg">Non-veg</option>
</select>
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<label>Quantity</label>
<input type="text" placeholder="Quantity" class="form-control" name="quantity" required>
</div>
<div class="col-md-6"> <label>Mobile</label>
<input type="text" placeholder="Mobile" class="form-control" name="mobile" required></div>
</div>
<div class="form-group">
<label for="">Address</label>
<textarea name="address" id="" cols="100" rows="3" style="width:100%"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Order</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal-1 -->
</div>
</div>
</div>
<!-- card end -->
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../static/images/pin.jpg" alt="Cake" style="width:100%">
<div class="card-body">
<h5 class="card-title">Rolls <span class="badge badge-danger">HOT</span> <span class="badge badge-light">Rs.20</span></h5>
<h2></h2>
<p class="card-text">A roll can be served and eaten whole or cut transversely and dressed with filling between the two halves.Click below to order.</p>
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal2" style="width: 100%">Order Now</a>
<!-- Modal -->
<!-- Modal-2 -->
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Order now.</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<img src="../static/images/pin.jpg" alt="" style="width: 220px;height: 185px;">
</div>
<div class="col-md-8">
<address >
<h6> Product Name: Rolls</h6>
<h6> Product Flavour: Regular</h6>
<h6> Product category: Best seller</h6>
<hr>
<h6> Availible in both veg and non-veg.</h6>
<h6> Made with best flour.</h6>
<h6> You can place order below.</h6>
</address>
</div>
</div>
<hr>
<form action="{% url 'home' %}" method="POST">
{% csrf_token %}
<div class="form-row">
<div class="col-md-6">
<label>Customer Name</label>
<input type="text" placeholder="Full Name" class="form-control" name="name" required>
</div>
<div class="col-md-6"> <label>Email</label>
<input type="email" placeholder="@gmail.com" class="form-control" name="email" required></div>
</div>
<div class="form-row">
<div class="col-md-6">
<label>Product name</label>
<input type="text" placeholder="rolls" value="Rolls" class="form-control" name="product" readonly>
</div>
<div class="col-md-6"> <label>Select category</label><br>
<select name="category" id="" style="width:180px">
<option value="Veg">Veg</option>
<option value="Non-veg">Non-veg</option>
</select>
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<label>Quantity</label>
<input type="text" placeholder="Quantity" class="form-control" name="quantity" required>
</div>
<div class="col-md-6"> <label>Mobile</label>
<input type="text" placeholder="Mobile" class="form-control" name="mobile" required></div>
</div>
<div class="form-group">
<label for="">Address</label>
<textarea name="address" id="" cols="100" rows="3" style="width:100%"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Order</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../static/images/tray.jpeg" alt="Cake" style="width:100%">
<div class="card-body">
<h5 class="card-title">Cookies <span class="badge badge-danger">HOT</span> <span class="badge badge-light">Rs.50 per pack</span></h5>
<h2></h2>
<p class="card-text">These cookie recipes represent the best of the best, including chewy chocolate chip cookies.Click below for order .</p>
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal3" style="width: 100%">Order Now</a>
<!-- Modal -->
<!-- Modal-3 -->
<div id="myModal3" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Order now.</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<img src="../static/images/tray.jpeg" alt="" style="width: 220px;height: 185px;">
</div>
<div class="col-md-8">
<address >
<h6> Product Name: Cookies</h6>
<h6> Product Flavour: Regular-chocolate</h6>
<h6> Product category: Best seller</h6>
<hr>
<h6> Availible in both veg and non-veg.</h6>
<h6> Made with best flour.</h6>
<h6> You can place order below.</h6>
</address>
</div>
</div>
<hr>
<form action="{% url 'home' %}" method="POST">
{% csrf_token %}
<div class="form-row">
<div class="col-md-6">
<label>Customer Name</label>
<input type="text" placeholder="Full Name" class="form-control" name="name" required>
</div>
<div class="col-md-6"> <label>Email</label>
<input type="email" placeholder="@gmail.com" class="form-control" name="email" required></div>
</div>
<div class="form-row">
<div class="col-md-6">
<label>Product name</label>
<input type="text" placeholder="rolls" value="cookies" class="form-control" name="product" readonly>
</div>
<div class="col-md-6"> <label>Select category</label><br>
<select name="category" id="" style="width:180px">
<option value="Veg">Veg</option>
<option value="Non-veg">Non-veg</option>
</select>
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<label>Quantity</label>
<input type="text" placeholder="Quantity" class="form-control" name="quantity" required>
</div>
<div class="col-md-6"> <label>Mobile</label>
<input type="text" placeholder="Mobile" class="form-control" name="mobile" required></div>
</div>
<div class="form-group">
<label for="">Address</label>
<textarea name="address" id="" cols="100" rows="3" style="width:100%"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Order</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal-3 -->
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!-- <div class="container">
<div class="row">
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../static/images/pastries.jpeg" alt="Cake" style="width:100%">
<div class="card-body">
<h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">$4.99</span></h5>
<h2></h2>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Order Now</a><a href="#" class="btn btn-primary offset-sm-1">Comments</a>
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../static/images/donuts.jpeg " alt="Cake" style="width:100%">
<div class="card-body">
<h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">$4.99</span></h5>
<h2></h2>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Order Now</a><a href="#" class="btn btn-primary offset-sm-1">Comments</a>
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../static/images/breads.jpg" alt="Cake" style="width:100%">
<div class="card-body">
<h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">$4.99</span></h5>
<h2></h2>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Order Now</a><a href="#" class="btn btn-primary offset-sm-1">Comments</a>
</div>
</div>
</div>
</div>
</div>
</div>
-->
{% endblock %}
I have used a bootstrap modal. It is working fine in localhost. But when I host my Django website on pythonanywhere none of the modals is working. The dropdown is also not working. But every bootstrap component other than these two is working fine.