I have my table where I list my data at the same time in my modal in editing I have a small function that allows me with a button to show or hide password but only the first record of the table works for me, the others do not.
This is my table where I list my data:
Here if you press the eye button it allows me to see the content.
And already in the second register if I want to be able to see the content it does not work. this is my button:
function mostrarPassword() {
var cambio = document.getElementById("contraseña");
if (cambio.type == "password") {
cambio.type = "text";
$('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
} else {
cambio.type = "password";
$('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
}
}
$(document).ready(function() {
//CheckBox mostrar contraseña
$('#ShowPassword').click(function() {
$('#Password').attr('type', $(this).is(':checked') ? 'text' : 'password');
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">Contraseña</label>
<div class="input-group">
<input type="Password" class="form-control" placeholder="Ingrese la contraseña" value="{{$data_p->contraseña}}" id="contraseña" name="contraseña" autocomplete="off" required>
<div class="input-group-append">
<button id="show_password" class="btn btn-primary" type="button" name="" onclick="mostrarPassword()" style="padding-top: 5px; padding-bottom: 3px;">
<span class="fa fa-eye-slash icon"></span></button>
</div>
</div>
</div>
</div>