JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<p id="p1">This is a paragraph.</p>

<button id="hide1">Hide</button>
<button id="show1">Show</button>

<br>
Paragraph display set to: <div id="div1" style="display: inline"></div>

<br><br><br>

<p id="p2" style="display: block">This is a paragraph.</p>

<button id="hide2">Hide</button>
<button id="show2">Show</button>

<br>
Paragraph display set to: <div id="div2" style="display: inline"></div>

<br><br><br>

<p id="p3">This is a paragraph.</p>

<button id="hide3">Hide</button>
<button id="show3">Show</button>

<br>
Paragraph display set to: <div id="div3" style="display: inline"></div>

CSS

.hidden {display:none}

JavaScript

$(document).ready(function()
{    
    $("#p3").css("display", "block");
    
    $("#div1").text($("#p1").css("display"));
    $("#div2").text($("#p2").css("display"));
    $("#div3").text($("#p3").css("display"));
    
    $("#hide1").click(function()
    {
        $("#p1").addClass("hidden");
        $("#div1").text($("#p1").css("display"));
    });
    
    $("#show1").click(function()
    {
        $("#p1").removeClass("hidden");
        $("#div1").text($("#p1").css("display"));
    });
    
    $("#hide2").click(function()
    {
        $("#p2").addClass("hidden");
        $("#div2").text($("#p2").css("display"));
    });
    
    $("#show2").click(function()
    {
        $("#p2").removeClass("hidden");
        $("#div2").text($("#p2").css("display"));
    });
    
    $("#hide3").click(function()
    {
        $("#p3").addClass("hidden");
        $("#div3").text($("#p3").css("display"));
    });
    
    $("#show3").click(function()
    {
        $("#p3").removeClass("hidden");
        $("#div3").text($("#p3").css("display"));
    });
});