html - Even if one button is pressed, show another item. jQuery

Question

I have a table with user data:

Again StackOverflow swears at "a little text, a lot of code", I have to write a lot of meaningless words, sorry.

$(document).ready(function(){
  $('.fas.fa-edit').click(function(e){
    e.preventDefault();
    $(this).closest('tr').find('.useredit, .fas.fa-times').show();
    $(this).closest('tr').find('.fas.fa-edit, .userdata').hide();
    });

  $('.fas.fa-times').click(function(e){
    e.preventDefault();
    $(this).closest('tr').find('.useredit, .fas.fa-times').hide();
    $(this).closest('tr').find('.fas.fa-edit, .userdata').show();
  });

  ////Here is a question
  if($('.fas.fa-times').is(':visible')){
    $('input.usereditbtn.btn.btn-success').hide();
  }else{
    $('input.usereditbtn.btn.btn-success').show();
  };
  ////Here is a question
});

.useredit, .fas.fa-times, .usereditbtn{
  display:none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table usertable">
   <thead>
   </thead>
   <form class="" action="{{ route('user_edit') }}" method="POST">
      <tbody>
         @csrf
         <tr>
            <th scope="col">Name</th>
            <td class="userdata">Name</td>
            <td class="useredit"><input name="name" placeholder="Write your name">
            <td>
            <td><a href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a>
            <td>
         </tr>
         <tr>
            <th scope="col">E-Mail</th>
            <td class="userdata">[email protected]</td>
            <td class="useredit"><input name="email" placeholder="Write your Email">
            <td>
            <td><a href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a>
            <td>
         </tr>
         <tr>
            <th scope="col">Phone</th>
            <td class="userdata">555555555</td>
            <td class="useredit"><input name="phone" placeholder="
Enter your phone number">
            <td>
            <td><a href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a>
            <td>
         </tr>
         <tr>
            <th></th>
            <td><input class="usereditbtn btn btn-success" type="submit" value="Save"></td>
         </tr>
      </tbody>
   </form>
</table>

question from:https://stackoverflow.com/questions/65862486/even-if-one-button-is-pressed-show-another-item-jquery

Answer 1

I can't find a purpose for having multi buttons/icons while all of them will do the same action .. but anyways you can use .each() inside the edit .click() and times .click() to loop through the buttons/icons

$(document).ready(function(){
$('.usereditbtn').closest('td').hide(0);
$('.fas.fa-edit').click(function(e){
  e.preventDefault();
  $('.usereditbtn').closest('td').show(0);
  $(this).closest('tr').addClass('editing').find('.useredit, .fas.fa-times').show();
  $(this).closest('tr').find('.fas.fa-edit, .userdata').hide();
});
$('.fas.fa-times').click(function(e){
  e.preventDefault();
  $(this).closest('tr').removeClass('editing').find('.useredit, .fas.fa-times').hide();
  $(this).closest('tr').find('.fas.fa-edit, .userdata').show();
  if(!$('tr.editing').length){
    $('.usereditbtn').closest('td').hide(0);
  }
});

////Here is a question
if($('.fas.fa-times').is(':visible')){
  $('input.usereditbtn.btn.btn-success').hide();
}else{
  $('input.usereditbtn.btn.btn-success').show();
};
////Here is a question
});

.useredit, .fas.fa-times{
  display:none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table usertable">
   <thead>
   </thead>
   <form class="" action="{{ route('user_edit') }}" method="POST">
      <tbody>
         @csrf
         <tr>
            <th scope="col">Name</th>
            <td class="userdata">Name</td>
            <td class="useredit"><input name="name" placeholder="Write your name">
            <td>
            <td><a href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a>
            <td>
         </tr>
         <tr>
            <th scope="col">E-Mail</th>
            <td class="userdata">[email protected]</td>
            <td class="useredit"><input name="email" placeholder="Write your Email">
            <td>
            <td><a href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a>
            <td>
         </tr>
         <tr>
            <th scope="col">Phone</th>
            <td class="userdata">555555555</td>
            <td class="useredit"><input name="phone" placeholder="
Enter your phone number">
            <td>
            <td><a href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a>
            <td>
         </tr>
         <tr>
            <th></th>
            <td><input class="usereditbtn btn btn-success" type="submit" value="Save"></td>
         </tr>
      </tbody>
   </form>
</table>