JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="anchor-1" style="display:block">anchor-1, block</a>
<a href="#" id="anchor-2" style="display:inline-block">anchor-2, inline-block</a>
<a href="#" id="anchor-3" style="display:inline">anchor-3, inline</a>

<br><br>
Expected:
<ul>
<li>["block", "inline-block", "inline"] </li>
<li>["none", "none", "none"]</li>
<li>["block", "inline-block", "inline"]</li>
<li>["none", "none", "none"]</li>
<li>["block", "inline-block", "inline"]</li>
</ul>

JavaScript

console.log([
  $('#anchor-1').css('display'),
  $('#anchor-2').css('display'),
  $('#anchor-3').css('display')
]);


$('a').hide();

console.log([
  $('#anchor-1').css('display'),
  $('#anchor-2').css('display'),
  $('#anchor-3').css('display')
]);



$('a').show();

console.log([
  $('#anchor-1').css('display'),
  $('#anchor-2').css('display'),
  $('#anchor-3').css('display')
]);


$('a').hide();

console.log([
  $('#anchor-1').css('display'),
  $('#anchor-2').css('display'),
  $('#anchor-3').css('display')
]);


$('a').show();

console.log([
  $('#anchor-1').css('display'),
  $('#anchor-2').css('display'),
  $('#anchor-3').css('display')
]);