Hello, I am currently working on jQuery. I have a code snippet to update the project name. It includes an input field and a save button. The process involves fetching the current project name, displaying it in the input field, allowing for edits, and then updating the project name upon clicking the save button. Unfortunately, I'm encountering difficulties with this process. Kindly assist me in resolving this issue. Thank you in advance.
$(document).ready(function() {
$(".detail-wrp").on("click", function() {
let inputVal = $(".prjt-nme", this).text();
$(".prjt-nme", this).hide();
$(".update-wrp", this).show();
$(".detail-input", this).val(inputVal).focus().select();
return false;
});
$(".detail-save-btn").on("click", function() {
$(".prjt-nme").css({
"display": "block"
});
$(".update-wrp").css({
"display": "none"
});
let pk = $(this).parents(".detail-wrp").find(".detail-input").val();
$(this).parents(".detail-wrp").find(".prjt-nme").text(pk);
});
});
.general-settings>div {
display: flex;
padding: 6px 10px 6px 10px;
width: 100%;
cursor: pointer;
}
/* More CSS styles go here */
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<!-- Your HTML code goes here -->