How can I change the edit button into save button and add cancel button? [closed]

Question

I want it where the edit button appears and then when I clear the edit button, the 'edit' will change into 'save' and then the 'cancel' button will also be shown.

$('#edit').click(function() {
  $(this).hide();
  $('#save, #cancel').show();
});

$('#cancel').click(function() {
  $('#edit').show();
  $('#save, #cancel').hide();
});

.save,
.cancel {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <button type="button" class="btn btn-secondary" value="edit">Edit</button>
  <button type="submit" class="btn btn-success" value="save">Save Changes</button>
  <button type="button" class="btn btn-secondary" value="cancel">Cancel</button>
</form>

Answer 1

You did small mistakes in your code.

• .save, .cancel it should be added in relevant field
• add id for each button, because you used "id" selector for jQuery

$('#edit').click(function() {
		$(this).hide();
		$('#save, #cancel').show();
	});

	$('#cancel').click(function() {
		$('#edit').show();
		$('#save, #cancel').hide();
	});
	
	$('#save').click(function() {
		$(this).hide();
		$('#cancel').hide();
		$('#edit').show();
	});

button.save, button.cancel {
        display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<form>
   <button type="button" class="btn btn-secondary" value="edit" id="edit">Edit</button>
   <button type="submit" class="btn btn-success save" value="save" id="save" >Save Changes</button>
   <button type="button" class="btn btn-secondary cancel" value="cancel" id="cancel" >Cancel</button>
</form>