Transaltions: Dynamic Lists - where do the translations go?

The wiki page has this example for translating lists:

// This part doesn't have to change
<select class="hiding" name="attr_class" style="width: 64px;">
	<option value="Barbarian" data-i18n="barbarian">Bárbaro</option>
	<option value="Bard" data-i18n="bard">Bardo</option>
	<option value="Cleric" data-i18n="cleric">Clerigo</option>
	<option value="Druid" data-i18n="druid">Druida</option>
</select>
...
<span data-i18n="class-options">Class Options</span> (<span name="attr_class" data-i18n-dynamic></span>)
...
{
	"Barbarian":"Bárbaro",
	"Bard":"Bardo",
	"Cleric":"Clerigo",
	"Druid":"Druida"
}

I sort of follow what this is doing, If I understand it correctly, the items in the select are translated properly, and when you select one, the properly translated item is shown in class options. But when you create the html, where do you put the bit at the bottom? this part:

{
	"Barbarian":"Bárbaro",
	"Bard":"Bardo",
	"Cleric":"Clerigo",
	"Druid":"Druida"
}

Does that just get added to the html file as is, is it put inside the script block, put in the translation.json file, or what? Or do you do nothing, and let the translation file autogenerate it?

Thats just the translation.json

That's the way that made most sense to me, but the lack of explanation on the wiki page was confusing.