Whenever I try to reveal a Bootstrap password using the eye button, my PC freezes. Strangely, an input is automatically added even though there are no codes for it. This auto-increasing input causes my browser to hang and eventually crashes my entire PC. Can anyone provide insight into why this might be happening and suggest a solution? It's becoming frustrating.
JSFIDDLE: https://jsfiddle.net/aice09/76b99w4m/
//Password Revealer
$(".reveal").mousedown(function() {
$(".pwd").replaceWith($('.pwd').clone().attr('type', 'text'));
})
.mouseup(function() {
$(".pwd").replaceWith($('.pwd').clone().attr('type', 'password'));
})
.mouseout(function() {
$(".pwd").replaceWith($('.pwd').clone().attr('type', 'password'));
});.btn-primary {
color: #0275d8;
background-image: none;
background-color: transparent;
border-color: #0275d8;
}
.btn-primary:hover {
background-color: #0275d8;
color: white;
border-color: #0275d8;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.min.jshttps://code.jquery.com/jquery-1.12.3.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label for="em_password">Password</label>
<div class="input-group">
<input id="em_password" name="em_password" type="password" class="form-control pwd" maxlength="8">
<span class="input-group-btn">
<button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
</span>
</div>
</div>
</div>
<!-- // Modal -->