Reverting back text()

Question

Currently I am trying the following:

1. By pressing button 'edit' it is changing all text within class .harms with a certain text.
2. By pressing button 'revert' it should return the oldcontent to it's original state.

Now I have two harms with both a unique text which is both being translated into something else. Now when I revert back to original text it is displaying both harms in one harm. You can see my Fiddle here: https://jsfiddle.net/qhqyro12/1/

<div>
  <p class="harms">This is a first test</p>
  <p id="test" class="harms">This is a second test</p>
  <a id="edit">edit</a>
  <a id="revert">revert</a>
</div>

$(function() {
    var myOldContent = $(".harms").text();

    $('#edit').click(function() {
        $('.harms').text('I want this to revert back to original state.');
    });

    $('#revert').click(function() {
        $(".harms").text(myOldContent);
    });
});

How can I make sure the correct string is placed back in the correct .harms Thanks.

Answer 1

You can utilize jQuery.data() to store original content of every harms.
After you click edit your original data is stored in data, and when you click revert, its value is restored.

// Implementation:
var originalContentDataAttributeName = "originalContent";

function setRevertableText($el, text) {
  $el.data(originalContentDataAttributeName, $el.text());
  $el.text(text);  
}

function revertText($el) {
  // You may want to check for data attribute existence here
  $el.text($el.data(originalContentDataAttributeName));
  $el.removeData(originalContentDataAttributeName);
}

// Usage:
$("#edit").click(function() {
  $(".harms").each(function() {
    setRevertableText($(this), "I want this to revert back to original state.");
  });
});

$("#revert").click(function() {
  $(".harms").each(function() {
    revertText($(this));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="harms">This is a first test</p>
  <p id="test" class="harms">This is a second test</p>
  <a id="edit">edit</a>
  <a id="revert">revert</a>
</div>