I have this HTML code in a TPL template called "customer-form.tpl" where I generate a series of buttons in a TPL template to show a user's edit fields, where the fields that come by default are rendered in prestashop and what I do the same is in a series of fields that are "password" and "new_password" add a button next to show / hide the value of that field.
The tpl code is this
<form action="{block name='customer_form_actionurl'}{$action}{/block}" id="customer-form" class="js-customer-form" method="post">
<section>
{block "form_fields"}
{foreach from=$formFields item="field"}
{block "form_field"}
{form_field field=$field}
{/block}
{/foreach}
{$hook_create_account_form nofilter}
{/block}
</section>The resulting HTML is something like this
<div class="form-group row ">
<label class="col-md-3 form-control-label required">
Contraseña
</label>
<div class="col-md-6">
<div class="input-group js-parent-focus">
<input class="form-control js-child-focus js-visible-password" name="password" type="password" value="" pattern=".{5,}" required="">
<span class="input-group-btn">
<button class="btn icon-show" type="button" data-action="show-password" data-text-show="Mostrar" data-text-hide="Ocultar"></button>
</span>
</div>
</div>
<div class="col-md-3 form-control-comment" style="visibility: hidden;">
</div>
</div>And then what I'm trying to do is to make the button not visible and then change it to a "fontawesome" icon
$(document).ready(function () {
$('.form-control-comment').css("visibility", "hidden");
$('.input-group-btn .btn').addClass('icon-show');
$('.input-group-btn .btn').empty();
});This code works for me the first time when the code is loaded, but to which I click on the button, the icon comes back to me together with the initial text ... and that is not correct.
Thanks