JQuery Script not working in IE or FireFox
I am using the following code to append meta content to product pages when a customer clicks to login. It works great in Safari and Chrome but not in IE, Edge, or Firefox. If I add the meta content to the page directly then it works but redirects the customer before they click the log in button.
Here is a link to a page where it is running:
https://arkaiosfresh.com/products/pineapple-concentrate . Any corrections would be greatly appreciated. As a point of reference; I have nothing more then very basic understanding of JQuery and have adapted this from code I found online.
<button type="click" name="add" id="login" class="btn btn--medium btn--auto">
<a class="login" style="color:white">Log in/Register to view the Supplier List</a>
{% endunless %}
<script>
$(document).ready(function(){
$(".login").click(function(){
$("#load").fadeIn(1000).delay(2000).fadeOut(1000);
$('head').append('<meta content="0; url=/account/login?checkout_url={{ canonical_url }}" http-equiv="refresh" />');
})
})
</script>