title: HTML - Grouped tabindexes; tabindexes in middle of legacy HTML code
body: <p>I am maintaining an advanced eform application with in-mixed legacy freetext HTML which I cannot easily alter. There have previously been no use of tabindex, it has relied on character stream order.</p>
  
  <p>In the middle of the page, I need to introduce a table containing inputs with custom tabbing order, such as:</p>
  
  <pre>
  |-----|-----|-----|
  |  1  |  3  |  5  |
  |-----|-----|-----|
  |  2  |  4  |  6  |
  |-----------------|
  </pre>
  
  <p>The way that legacy/previously added inputs are rendered on the page, I can actually dynamically/centrally alter them so that they do output tabindexes in order. Such as:</p>
  
  <pre>
  [Input, tabindex: 1]
  
  |-----|-----|-----|
  |  2  |  4  |  6  |
  |-----|-----|-----|
  |  3  |  5  |  7  |
  |-----------------|
  
  [Input, tabindex: 8]
  </pre>
  
  <p>But the problem appears when freetext HTML  anchors start to show up, which are not rendered dynamically (so cannot easily add tabindex to them, unless I added quite a bit of regex logic). So then the tabbing becomes this:</p>
  
  <pre>
  [Input, tabindex: 1]
  
  |-----|-----|-----|
  |  2  |  4  |  6  |
  |-----|-----|-----|
  |  3  |  5  |  7  |
  |-----------------|
  
  [anchor link]
  [Input, tabindex: 8]
  </pre>
  
  <p>Which makes the link <strong>unable to be tabbed to</strong>. There may be even worse, more advanced cases of this... but I think the issue is understandable?</p>
  
  <p><strong>So my question is this</strong>... is it possible to somehow assign somekind of tabindex groups in the sense of:</p>
  
  <pre>
  [tabgroup1]
  [Input]
  [/tabgroup1]
  
  [tabgroup2]
  |-----|-----|-----|
  |  1  |  3  |  5  |
  |-----|-----|-----|
  |  2  |  4  |  6  |
  |-----------------|
  [/tabgroup2]
  
  [tabgroup3]
  [anchor link]
  [Input]
  [/tabgroup3]
  </pre>
  
  <p>So that I can have tabbing work just as before, jumping in the order of the character stream, from input to the closest anchor, to the next input, et cetera... but while inside [tabgroup2] it will go in the order of the tabindexes there, but then to continue into [tabgroup2] and tab on as if all elements had <em>tabindex="0"</em></p>
  
  <hr>
  
  <p>What I am looking for is some magic HTML solution (which is unlikely) or a relatively simple javascript library which might have implemented something like this.</p>
  
  <p>Or, if this does not really exist, it would be interesting to hear some alternative ideas, or thoughts of possible caveats if I try to implement it, myself.</p>