SortableJS grouping without a nested DOM structure

[ricjohn-acosta]

Here’s my simplified DOM structure. I would like th elements that share the same data-date attribute to belong to the same SortableJS group. This way, I can drag th elements only within their matching date group, without allowing them to be moved into other groups. Is this possible?

  <thead>
    <tr id="container">
      <th data-date="2024-11-04" id="col1">Column 1</th>
      <th data-date="2024-11-03" id="col2">Column 2</th>
      <th data-date="2024-11-04" id="col3">Column 3</th>
    </tr>
  </thead>

I know that if my DOM structure was the following it would be easier but this would require me to do quite heavy DOM manipulation which I'd like to avoid.

  <thead>
    <tr id="container" data-date="2024-11-04">
      <th data-date="2024-11-04" id="col1">Column 1</th>
      <th data-date="2024-11-04" id="col3">Column 2</th>
    </tr>
    <tr id="container" data-date="2024-11-05">
      <th data-date="2024-11-05" id="col1">Column 3</th>
      <th data-date="2024-11-05" id="col3">Column 4</th>
    </tr>
  </thead>