JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Заголовок 1</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum consequat maximus. Pellentesque feugiat, nisl eget ornare lobortis, sem nisi maximus nisl, ultricies dapibus turpis odio id magna.
<h2>Заголовок 2</h2> Donec condimentum mauris nunc. Integer non mi at nunc imperdiet bibendum ac et sapien. Donec porta rhoncus nibh, eget egestas dui.
<h2>Заголовок 3</h2> Praesent dui nisl, molestie quis tellus sit amet, ullamcorper consectetur odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<h2>Заголовок 4</h2> Praesent dui nisl, molestie quis tellus sit amet, ullamcorper consectetur odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<h2>Заголовок 5</h2> Praesent dui nisl, molestie quis tellus sit amet, ullamcorper consectetur odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

CSS

#nav {
  border: 1px solid black;
  padding: 15px;
  box-sizing: border-box;
}

JavaScript

$(() => {
  $('body').prepend('<div id="nav"><ul></ul></div>');
  for (let i = 0, j = $('h2').length; i < j; i++) {
    $('h2').eq(i).wrap(`<a name="a${i}"></a>`);
    $('#nav ul').append(`<li><a href="#a${i}">${$('h2').eq(i).html()}</a></li>`);
  }
})