Jquery update text on selected div

Question

I'm trying to update text inside clicked element, but both the div gets updated on the same time. trying to play around the same code without including Id or further class.

Trying to find the solution since morning.

Here is the the live fiddle to playground: 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>

Answer 1

Define big_parent out of all the function body and you're done.

var big_parent
$(".edit_me").hover(function() {

  $(this).addClass('hover_edit_me');

  $(".hover_edit_me").on('click', function(e) {
    e.preventDefault();
      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/1.9.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>

here is snippet