How do I pass an Array to Bootstrap Modal?

I load the page with a table and loop through my array throwing all the variables in attributes of the button in the table. My question, is it possible to pass an array to a modal window? My goal is to see which groups exist for the accounts and check a box displaying the box they belong to. I have not wrote the code to check the box yet as I am unable to retrieve the data from the array.

JSON: "element": [ { "account": "accountname", "name": "name", "subelement": [ {"groups": "group1"}, {"groups": "group2"}, {"groups": "group3"}, ] }, { "account": "accountname2", "name": "name2", "subelement": [ {"groups": "group1"}, {"groups": "group2"}, {"groups": "group3"}, ] } ]

HTML/PHP that builds the table:

<table>
<thead>
<th>More</th>
<th>Account</th>
</thead>
<tbody>
<?php
foreach($newResults['element'] as $item)
{
echo '<tr>';
echo '<th scope="row"><button class="btn btn-primary btn-sm" 
account-type="'.$item['account'].'" 
name-type="'.$item['name'].'" 
groups-type="'.json_encode($item['subelement']).'"
data-bs-toggle="modal" data-bs-target="#modifyUser">More</button></th>';
echo '<td>'.$item['account'].'</td>';
echo '<td>'.$item['name'].'</td>';
echo '</tr>';
}
?>
</tbody>
</table>
 <!-- Modal -->
<div class="modal fade" id="modifyUser" tabindex="-1" aria-labelledby="modifyUserLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
 <div class="modal-content">
  <div class="modal-header p-1 mb-1">
<h5 class="modal-title pe-2" name="modal-title" id="modal-title">Name</h5>
<div align="center" id="countdown"></div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
    <div class="modal-body">
<form id="modalform">
     <div class="row p-1 mb-1 bg-secondary text-white rounded">
<div class="col-sm">
<label>Account</label>
<input class="form-control" name="account" type="text" id="account">
</div>
<div class="col-sm">
<label>Name</label>
<input class="form-control" name="name" type="text" id="name">
</div>
<div class="col">
<ul class="list-group">
<div class="bg-warning text-dark rounded-top" align="center"><h6>Driver Type</h6></div>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" name="group1" id="group1">Group 1
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" name="group2" id="group2">
Group2
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" name="group3" id="group3">Group3
</li>
</ul>  
</div>
     </div>
    </div>
   </div>
  </div>
</div>

JS:

$('#modifyUser').on('show.bs.modal', function (e) {
var opener=e.relatedTarget;
  
//we get details from attributes
  var account=$(opener).attr('account-type');
  var name=$(opener).attr('name-type');
  var groups=$(opener).attr('groups-type');
  var myJson=JSON.parse(groups);
  console.log("test: "+myJson);

//Populate Modal
$('#modalform').find('[name="account"]').val(account);
$('#modalform').find('[name="name"]').val(name);
})

Any and all help is appreciated!