Pop up modal immediately disappear - php

Question

enter image description here
The image is showing the data in the table.
What I want is when I click the view button, it will pop up the modal to display the row of data.
I want get the row of data and display in the pop up modal.
After I added this script, the modal will pop up and close directly.
The modal cannot show, the modal just display one second and close directly
script code
$(document).ready(function() {
$('.resetbtn').on('click', function() {
$('#resetmodal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $(this).text();
}).get();
console.log(data);
$('#pass_id').val(data[0]);
});
});
button code
<button type="button" style="border:none; background-color: transparent;" data-toggle="modal" data-target="#resetmodal" class="resetbtn">view<i class="glyphicon glyphicon-asterisk" style="font-size:15px; color:blue;"></i></button> |
modal code
<div class="modal fade" id="resetmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="exampleModalLabel"><b>RESET PASSWORD</b></h3>
</div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<div class="modal-body">
<div class="form-group">
<input name="pass_id" id="pass_id" type="text" class="form-control" value="<?php echo $db_pass_id; ?>"></input>
</div>
<div class="form-group">
<label><b>Password : </b></label> <span class="validation">*</span>
<input name="p_password3" id="p_password3" type="password" class="form-control input-box" onkeypress="return AvoidSpace(event)" onblur="this.value=removeSpaces(this.value);" minlength="6" required></input>
<input type="checkbox" onclick="myFunction3()"> Show Password</input>
</div>
<div class="form-group">
<label><b>Confirm Password : </b></label> <span class="validation">*</span>
<input name="p_password4" id="p_password4" type="password" class="form-control input-box" onkeypress="return AvoidSpace(event)" onblur="this.value=removeSpaces(this.value);" minlength="6" required></input>
<input type="checkbox" onclick="myFunction4()"> Show Password</input>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="reset" class="btn btn-primary">RESET</button>
<button type="button" name="close" class="btn btn-warning" data-dismiss="modal">CLOSE</button>
</div>
</form>
</div>
</div>
</div>

Answer 1

data-target="#resetmodal" does the show/hide for you!. But inside your script you have
$('#resetmodal').modal('show');
In other words, you are showing modal with that script and hiding with data-target="#resetmodal"