JSFiddle - React, Tailwind, and code Playground

HTML

<details id='1'>
      <summary>System Requirements 1</summary>
      <p>Requires a computer running an operating system. The computer
      must have some memory and ideally some kind of long-term storage.
      An input device as well as some form of output device is
      recommended.</p>
    </details>
    <details id='2'>
      <summary>System Requirements 2</summary>
      <p>Requires a computer running an operating system. The computer
      must have some memory and ideally some kind of long-term storage.
      An input device as well as some form of output device is
      recommended.</p>
    </details>
    <details id='3'>
      <summary>System Requirements 3</summary>
      <p>Requires a computer running an operating system. The computer
      must have some memory and ideally some kind of long-term storage.
      An input device as well as some form of output device is
      recommended.</p>
    </details>

JavaScript

(function() {
	$('details').on('toggle', function(event) {
    var id = $(this).attr('id')
    var isOpen = $(this).attr('open')
    console.log(id, isOpen)
    window.localStorage.setItem('details-'+id, isOpen)
  })

function setDetailOpenStatus(item) {
  if (item.includes('details-')) {
    var id = item.split('details-')[1];
    var status = window.localStorage.getItem(item)
    if (status == 'open'){
      $("#"+id).attr('open',true)
     }
   }
}

$( document ).ready(function() {
  for (var i = 0; i < localStorage.length; i++) {
    setDetailOpenStatus(localStorage.key(i));
  }
});
})();