How to pass specific item to another page HTML JavaScript Jquery

I want to pass specific items(paragraphs) to another page with button. I’m currently beginner in web development. Is there any way to do that? also I need to add those “like” buttons to every paragraph in my page. There’s a lot of them… So is there any way to add those “like” buttons(with same ids) to every paragraph and when I click “like” button it likes this specific paragraphs that’s next to it.

I made “like” button next to one of the paragraph. So far I’ve managed to save like buttons toggle state. Now I need to pass this specific “liked” paragraphitem to another page. Here’s my first page:

<!--Name of that file is "page1.html"-->
<p>A<span id="heart"><i class="fa fa-heart-o" aria-hidden="true" ></i></span></p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
<p>F</p>
<p>G</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";
        } else {
          $("#heart").html('<i class="fa fa-heart" aria-hidden="true"></i>');
          $('#heart').toggleClass("with_toggle", false);
          localStorage.toggled = "";
        }
      });
</script>

And here’s my second page:

<!--Name of that file is "page2.html"-->
<body>
    <div>
        <!--SAVED PARAGRAPHS/ITEMS--->
    </div>
</body>