JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.accordion.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<div id="accordion">
 <h3 class="ui-accordion-header"><a id="link1" href="#">First Header</a></h3>
    <div id="div1">First Content</div>
 <h3 class="ui-accordion-header"><a id="link2" href="#">Second Header</a></h3>
  <div id="div2">Second Content</div>
</div>

JavaScript

$("#accordion").accordion({
  collapsible: true,
  active:false,
  navigation:true,
  autoHeight:false,
  change:function(event, ui){
    var index = $(this).find("h3").index(ui.newHeader[0]);
    //var header = $(this).find("h3")[index].find("a"); //<--- problem line
    //var currentHeaderID = (header.attr("id")); //<--id that I need
  }
});