Jquery.click() function with problems running

Question

According to my code below, when I click the button Ver senha on the web is making a GET when I really just want you to show the password field. What might be wrong?

$('.passwordShowLabel').hide();
$('#passwordShow').hide();
$('#password').removeAttr("required");
$('#confirmPassword').removeAttr("required");

$('#btnPasswordEditDesistir').hide();
var checkbox = $('#chkPassword');
var checked = checkbox.prop("checked");

$('#btnPasswordEdit').click(function() {
  $(this).hide();
  $('#btnPasswordEditDesistir').show("slow");
  $('#passwordSection').show("slow");
  $('#password').attr('required', 'true');
  $('#confirmPassword').attr('required', 'true');
});

$('#btnPasswordEditDesistir').click(function() {
  $(this).hide();
  $('#btnPasswordEdit').show("slow");
  $('#passwordSection').hide("slow");
  $('#password').removeAttr("required");
  $('#confirmPassword').removeAttr("required");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-xl-12">

  <div class="pull-left">

    <button id="btnPasswordEdit" class="btn btn-info">
														Editar
													</button>

    <button id="btnPasswordEditDesistir" class="btn btn-secondary">
														Desistir
													</button>


    <button id="btnPasswordView" class="btn btn-info">
														Ver Senha
													</button>

  </div>
</div>



<div class="form-group">


  <label class="passwordShowLabel control-label" for="passwordShow" title="" style="display: none;">Senha atual    </label>

  <div class="">


    <input title="" id="passwordShow" name="object.passwordRoundTripV1" type="text" class="form-control  readonly " placeholder="" value="12345678a" style="display: none;" readonly="readonly">
    <span class="help-block">  </span>





  </div>


</div>


<section id="passwordSection" style="display: none;">

  <div class="col-xl-12">

    <div class="form-group">


      <label class=" control-label" for="password" title="">Senha    </label>

      <div class="">


        <input title="" id="password" name="password" type="password" class="form-control" placeholder="" value="">
        <span class="help-block">  </span>





      </div>


    </div>

    <div class="form-group">


      <label class=" control-label" for="confirmPassword" title="">Confirmar senha    </label>

      <div class="">


        <input title="" id="confirmPassword" name="confirmPassword" type="password" class="form-control  " placeholder="" value="">
        <span class="help-block">  </span>





      </div>


    </div>






  </div>
</section>

Answer 1

If your button is inside a tag <form> will be necessary to cancel the event so that button does not send the form. So:

Of:

$('#btnPasswordEdit').click(function() {

To:

$('#btnPasswordEdit').click(function(e) {
  e.preventDefault();