How to create bookmark system using existing heading tag in HTML page through Javascript

I want to create a bookmark system using headings which are present in my HTML document. I want to do that using heading hierarchy. My headings are like below. I tried it but failed. enter image description here

I want My boookmark like below with link:

enter image description here

My HTML code:

<style>
    #bookMark {
      border: 1px solid black;
      margin-bottom: 10px;
    }
    </style>

    <div id="bookMark">
    <b>Book Mark: </b>
    </div>

    <h1> This is 1st main Heading1 </h1>
      <h2> This is h2 under h1 </h2>
          <h3> This is h3 under h1 and h2 </h3>

      <h2> This is h2 </h2>
         <h3> This is h3</h3> 

    <h1> This is 2nd main Heading1 </h1>
      <h2> This is h2 under h1 </h2> 

    <script src="dom.js"> </script>

My script Code:

    var heading1 = document.getElementsByTagName('h1');
    var heading2 = document.getElementsByTagName('h2');

    for(var i = 0; i < heading1.length; i++){
     var para = document.createElement("p");
     para.innerHTML = document.getElementsByTagName('h1')[i].innerHTML;
     document.getElementById("bookMark").appendChild(para);

      for(var j = 0; j < heading2 .length; j++){
        var para = document.createElement("p");
        para.innerHTML = "&nbsp;"+ document.getElementsByTagName('h2')[j].innerHTML;
        document.getElementById("bookMark").appendChild(para);
      }

    }

My Output: This is not maintaing the hierarchy enter image description here