JSFiddle - React, Tailwind, and code Playground

HTML

<div id="results_credentials">

</div>

JavaScript

var data = '[{"sequence":"9753","updated":"26\/06\/2023 18:26:33","updated_by":"Charlie Ford","title":"GroupTest","data":{"note":"2","username":"user","password":"pass"}},{"sequence":"9755","updated":"26\/06\/2023 18:26:41","updated_by":"Charlie Ford","title":"GroupTest","data":{"note":"1","username":"2","password":"3"}},{"sequence":"9756","updated":"26\/06\/2023 16:57:02","updated_by":"Charlie Ford","title":"1","data":{"note":"1","username":"1","password":"1"}}]';

var title = '';
$('#results_credentials').html("");
for(var i in data) {
  var m = '';

  var end_of_tbl = '</tbody>';
  end_of_tbl += '</table>';
  end_of_tbl += '</div>';
  end_of_tbl += '</div>';
  end_of_tbl += '</div>';

  if(title !== data[i].title) {
    if(title !== "") {
      m += end_of_tbl;
    }

    title = data[i].title;

    m += '<div class="panel-collapse box box-warning">';
    m += '<div class="box-header">';
    m += '<h3 class="box-title">';
    m += '<a href="#box_expand_' + data[i].sequence + '" data-toggle="collapse" id="credential_title_' + data[i].sequence + '">' + data[i].title + '</a>';
    m += '</h3>';
    m += '</div><!-- /.box-header -->';

    m += '<div class="box-body panel-collapse collapse2" id="box_expand_' + data[i].sequence + '">';
    m += '<div class="table-responsive">';
    m += '<table class="table table-bordered table-hover" border="1">';
    m += '<thead>';
    m += '<tr>';
    m += '<th class="credential_group credential_group_' + data[i].title + '">Group</th>';
    m += '<th>Note</th>';
    m += '<th>Username</th>';
    m += '<th>Password</th>';
    m += '<th>Updated</th>';
    m += '<th colspan="2">Actions</th>';
    m += '</tr>';
    m += '</thead>';
    m += '<tbody>';
  }

  m += '<tr id="credential_row_' + data[i].sequence + '">';
  m += '<td colspan="7">test</td>';
  m += '</tr>';

  $('#results_credentials').append(m);
}