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 "favorite" buttons to every paragraph in my page. There's a lot of them... So is there any way to add those "favorite" buttons(with same ids) to every paragraph and when I click "favorite" button it saves this specific paragraphs that's next to it.
I made "favorite" button next to one of the paragraph. So far I've managed to save favorite buttons toggle state. Now I need to pass this specific "favorited" paragraph\item 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>