How to transfer different parents data to other page with help of the same buttons using LocalStorage HTML/jQuery

Issue

I'm made half of the code with the help of mplungjan. So far I've made multiple(same) buttons for multiple paragraphs. Those buttons are like a favorite buttons and I want to pass those favorited paragraphs to a different page. For my more information visit this question, where I tried to add same buttons and work with them independently. Here the code that I wrote so far(Line of code that saves paragraph only saves "A" not others. Even if the other favorite buttons are checked. Only saves "A"):

<form action="pages/login_screen.html">
    <p>A<i class="heart fa fa-heart-o" aria-hidden="true"></i></p>
    <p>B<i class="heart fa fa-heart-o" aria-hidden="true"></i></p>
    <p>C<i class="heart fa fa-heart-o" aria-hidden="true"></i></p>
    <p>D<i class="heart fa fa-heart-o" aria-hidden="true"></i></p>
    <button><a href="pages/login_screen.html">GO</a></button>
</form>
<script>
$(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))
    localStorage.setItem("paragraphValue", $(".heart").parent().html());  //Saves paragraph
  })
});
</script>

And this is my second page:

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

Solution

loop to all .heart.fa-heart-o class, working demo on jsfiddle (open browser console)

$(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))
    // replace 
    // localStorage.setItem("paragraphValue", $(".heart").parent().html());
    // with
    var favs =$('.heart.fa-heart-o').map((i, f)=> `<p>${f.parentElement.innerHTML}</p>`).get().join('\n')
    localStorage.setItem("paragraphValue", favs); //Saves paragraph
    
    console.clear();
    console.log(favs)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<form action="pages/login_screen.html">
  <p>A<i class="heart fa fa-heart-o" aria-hidden="true"></i></p>
  <p>B<i class="heart fa fa-heart-o" aria-hidden="true"></i></p>
  <p>C<i class="heart fa fa-heart-o" aria-hidden="true"></i></p>
  <p>D<i class="heart fa fa-heart-o" aria-hidden="true"></i></p>
  <button><a href="pages/login_screen.html">GO</a></button>
</form>

Answered By - uingtea