How to make same buttons work independently HTML/jQuery

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 class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span></p>
<p>B<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p>
<p>C<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p>
<p>D<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p>
<p>E<!--<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>--></p>
    <script>
        $(window).on('load',function(){
            if(localStorage.toggled != "with_toggle"){
                $(".heart").html('<i class="fa fa-heart" aria-hidden="true"></i>');
            }else{
                $(".heart").html('<i class="fa fa-heart-o" aria-hidden="true"></i>');
            }
        });
        $('.heart').toggleClass(localStorage.toggled);
        $('.heart').on('click',function(){
            if (localStorage.toggled != "with_toggle") {
                $(".heart").html('<i class="fa fa-heart-o" aria-hidden="true"></i>');
                $('.heart').toggleClass("with_toggle", true);
                localStorage.toggled = "with_toggle";
                localStorage.removeItem("paragraphValue");
            } else {
                $(".heart").html('<i class="fa fa-heart" 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>