After spending the entire morning trying to figure it out, I am still struggling with updating text inside a clicked element without both divs getting updated at the same time. I am determined to find a solution without using IDs or additional classes.
If you want to take a look and help me out, here is the live fiddle link where you can play around with the code: https://jsfiddle.net/vinayak5192/63ujzwwn/2/
$(".edit_me").hover(function() {
$(this).addClass('hover_edit_me');
$(".hover_edit_me").on('click', function(e) {
e.preventDefault();
var big_parent = $(this);
//edit text
if (big_parent.attr("data-type") == 'text') {
$("#sim-edit-text .text").val(big_parent.text());
$("#sim-edit-text").fadeIn(500);
$("#sim-edit-text .sim-edit-box").slideDown(500);
$("#sim-edit-text .sim-edit-box-buttons-save").click(function() {
big_parent.text($("#sim-edit-text .text").val());
});
}
});
}, function() {
$(this).removeClass('hover_edit_me');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit_me" data-type="text">This is simple title</div>
<p class="edit_me" data-type="text">This is simple paragraph</p>
<hr/>
<!-- Edit Form -->
<div class="appName_edit" id="sim-edit-text">
<div class="sim-edit-box">
<div class="sim-edit-box-content">
<small>Edit Text: </small>
<div class="sim-edit-box-content-field">
<textarea class="sim-edit-box-content-field-textarea text"></textarea>
</div>
</div>
<div class="sim-edit-box-buttons">
<div class="btn appName_btn_save sim-edit-box-buttons-save">Save</div>
<div class="btn appName_btn_cancel sim-edit-box-buttons-cancel">Cancel</div>
</div>
</div>
</div>