How to make same buttons work independently HTML/jQuery-CodePudding

I'm making favorite buttons that saves them with localStorage in a different page. I added those favorite buttons to every paragraph. I don't want to write a lots of same codes for each of them. The question is that, is there any way to make same buttons work independently and save their parent objects to another page. So far I've made just one favorite button to one paragraph and I've managed to save it to a different page. Here's my code:

<form action="pages/login_screen.html">
<p>A<span ><i  aria-hidden="true"></i></span></p>
<p>B<!--<span ><i  aria-hidden="true"></i></span>--></p>
<p>C<!--<span ><i  aria-hidden="true"></i></span>--></p>
<p>D<!--<span ><i  aria-hidden="true"></i></span>--></p>
<p>E<!--<span ><i  aria-hidden="true"></i></span>--></p>
    <script>
        $(window).on('load',function(){
            if(localStorage.toggled != "with_toggle"){
                $(".heart").html('<i  aria-hidden="true"></i>');
            }else{
                $(".heart").html('<i  aria-hidden="true"></i>');
            }
        });
        $('.heart').toggleClass(localStorage.toggled);
        $('.heart').on('click',function(){
            if (localStorage.toggled != "with_toggle") {
                $(".heart").html('<i  aria-hidden="true"></i>');
                $('.heart').toggleClass("with_toggle", true);
                localStorage.toggled = "with_toggle";
                localStorage.removeItem("paragraphValue");
            } else {
                $(".heart").html('<i  aria-hidden="true"></i>');
                $('.heart').toggleClass("with_toggle", false);
                localStorage.toggled = "";
                var paragraph = document.querySelector(".heart").parentNode.innerHTML;
                localStorage.setItem("paragraphValue", paragraph);
                return false;
            }
        });
    </script>
<form action="pages/login_screen.html">

Here's the second page:

<div id="favorites"><!--FAVORITES HERE--></div>
    <script>
        document.getElementById("favorites").innerHTML = localStorage.getItem("paragraphValue");
    </script>

CodePudding user response：

You need to save the likes in an array and save the array

NOTE I remove the span and added the class to the <i>

https://jsfiddle.net/mplungjan/c8zf07rh/

$(function() {
  const swapToggle = ($heart, toggle) => {
    $heart.toggleClass("fa-heart-o", toggle);
    $heart.toggleClass("fa-heart", !toggle);
  };
  const $hearts = $(".heart");
  const toggleString = localStorage.getItem("toggles");
  console.log(toggleString)
  const toggles = toggleString ? JSON.parse(toggleString) : $hearts.map(function() {
    return $(this).hasClass('fa-heart')
  }).get(); // get all hearts on page
  $hearts.each(function(i, elem) { // initialise from localStorage
    swapToggle($(this), toggles[i])
    $(this).data("idx", i); // save position in array
  })
  $('.heart').on('click', function() {
    const idx =  $(this).data("idx"); // position in array
    toggles[idx] = !toggles[idx]; // actual toggling
    swapToggle($(this), toggles[idx])
    localStorage.setItem("toggles", JSON.stringify(toggles))
  })
});