JSFiddle - React, Tailwind, and code Playground

by master1991

HTML

<html>
<head>
<style>

#foo {
position: absolute;
z-index: 99;
left: 250px;
top: 60px;
}

th{
  padding: 10px;
  border-bottom: 1px solid #ddd;
  }

tr{
  background: white;
  border-bottom: 1px solid #ddd;

}
td{
  font-size: smaller;
  padding: 15px;
  border-bottom: 1px solid #ddd;
 }
</style>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>

<script>
  var a = parseFloat(prompt("Give the 2019 Income","0"));
  var b = parseFloat(prompt("Give the 2018 Income","0"));

  var c = parseFloat(prompt("Give the Expenses of 2019","0"));
  var d = parseFloat(prompt("Give the Expenses of 2018","0"));

  $(document).ready(function(){
  



      $("#thisB").on('click', function(){

        console.log('test '+a+' '+b+' '+c+' '+d);

        if (a==0 && b==0){   
          $('.h1').hide();
          console.log('aaa');
        }
        if (c==0 && d==0){  
        	$('.h2').hide(); 
          console.log('bbb');
        }

      });
    
        document.getElementById("p2").innerHTML=a;
        document.getElementById("p3").innerHTML=b;

        document.getElementById("p4").innerHTML=c;
        document.getElementById("p5").innerHTML=d;        
        
});
</script>
</head>
<body>

<button id="thisB">Hide when results are 0</button>

<table id="foo">
<tbody>

  <tr id="foo1">
    <td></td>
    <td> <b>2019</b> </td>
    <td> <b>2018</b> </td>
  </tr>

<div class="h1">
  <tr id="foo2">
    <th> <b><p >Income:</p></b> </th>
    <td> <b><p id="p2"></p></b> </td>
    <td> <b><p id="p3"></p></b> </td>
  </tr>
</div>

<div class="h2">
  <tr id="foo3">
    <th> <b><p>Expenses:</p></b> </th>
    <td> <b><p id="p4"></p></b> </td>
    <td> <b><p id="p5"></p></b> </td>
  </tr>
</div>

  <tr id="foo4">
    <th> Monthly expenses :</th>
    <td> <b>2.500</b> </td>
    <td> </td>
  </tr>

</tbody>
</table>

</body>
</html>