Multiple the same form label in a page issue

Question

I have a multiple forms in one page. Each form has exactly the same content. But i encountered an issue regarding with my labels. I know that label "for" tag should be unique and pointed to the element id but I have to multiply the form for some reason. Please refer to my code found in jsfiddle my code

<form>
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options">

<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options">

<label for="option3">Option 3</label>
<input type="radio" id="option3" name="options">
</form>

<!-- another form but the same content -->
<form>
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options">

<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options">

<label for="option3">Option 3</label>
<input type="radio" id="option3" name="options">
</form>​

Thanks

Answer 1

Either:

• Generate a prefix that you apply to all the ids in a given instance of a form
• Don't use for or id and place the form controls inside the label elements.