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">This is a paragraph.</p>

<button id="toggle"> Toggle </button>

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

JavaScript

$(document).ready(function()
{        
    $("#div1").text($("#p1").css("display"));
    $("#div2").text($("#p2").css("display"));
    
    $("#hide1").click(function()
    {
        $("#p1").hide();
        $("#div1").text($("#p1").css("display"));
    });
    
    $("#show1").click(function()
    {
        $("#p1").show();
        $("#div1").text($("#p1").css("display"));
    });
    
    $("#toggle").click(function()
    {
        if ($("#p2").is(":visible"))
        {
        	  $("#p2").hide();
        }
        else
        {
            $("#p2").show();
        }
        
        $("#div2").text($("#p2").css("display"));
    });
});