Need help with code

hi everyone i need help with my json menu
this is where i need to display my menu with the below menu code

<li class="nav-link">
  <img src="https://i.imgur.com/h2bZxBg.png" width="23" height="23"> 
  <a class="nav-item" data-toggle="item" href="bitcoin.php" role="tab">Bitcoin</a>
  </li>

this is my table where i need to replace it with my other menu below

<thead>
                <tr>
                <th>Name</th>
                <th>Minutes</th>
                <th>reward</th>
                <th>Claim</th>
                </tr>
                </thead>
                <tfoot>      
        </tfoot>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        </table>  

need to replace the below code into my menu

 <ul class="nav nav-tabs">
    <li class="active">  <a data-toggle="tab" data-type="0" href="#homer"></a></li>
    <li><a data-toggle="tab" data-type="2" href="#menu1"></a></li>

  </ul>
 
  <div class="tab-content">
    <div id="menu1" class="tab-pane fade in active">
      <h3 id="title1"></h3>
      <div id="content1"></div>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3 id="title2"></h3>
       <div id="content2"></div>
    <div id="menu3" class="tab-pane fade">
      <h3 id="title3"></h3>
       <div id="content3"></div>
    </div>
    <div id="menu4" class="tab-pane fade">
       <h3 id="title4"></h3>
       <div id="content4"></div>
    </div>
  </div>
</div>


<script>
$.getJSON("faucetlist.json").then(function(data) {
  "use strict"
  $(function() {
    var links = document.getElementsByTagName('a');
    var i = 0;
    for (var coin in data.coinlist) {
      links[i].innerHTML = coin;
      i++;
    }
    
    $('li > a').click(function() {
      var table = $('#faucetlist')
      var type = $(this).data('type');
      var name = $(this).text().replace(' ', '_')
      var the_data = data.coinlist[name];

      for (var sub in the_data) {
        console.log('sub ' + sub)
        var field = the_data[sub]
        $('#' + sub).find('span').text(field)
        if (sub == 'faucet_name' || sub == 'claim_link') {
          var newlink = the_data.claim_link;
          // console.log(newlink)
          $('#' + sub).find('a').prop('href', newlink)
        }
      }

      console.log('type ' + name)

      $('#content' + type).append(table)
      $('table').css('display', 'block')
    })
    $('li > a').first().trigger('click');
  })
})
</script>


<table id=“faucetlist” class="table table-bordered table-condensed table-hover" cellspacing="0" width="100%">
  <thead>
    <tr>
       <th id="faucet_name"><a href=""><button type="button" class="btn btn-success"><span></span></button></a></th>
      <th id="minutes"><button type="button" class="btn btn-info"><span></span></button></th>
      <th id="reward"><button type="button" class="btn btn-info"><span></span></button></th>
      <th id="claim_link"><a href=""><button type="button" class="btn btn-success">claim</button></a></th>
    </tr>
    </thead>
    <tfoot>     
  </tfoot>

</table>  ```