How to add value to label?

Question

HTML

hello, please tell me how to be in such a situation for styling inputs?

{if $pe_settings[$fieldset].use_free}<div><input type="radio" name="price_type" id="price_type" value="2" {if isset($tmp.price) && $tmp.price==0}checked="checked"{/if} />&nbsp;{$pe_settings[$fieldset].lang[$crt_lang].free}</div>{/if}
  {if $pe_settings[$fieldset].use_tags}
  {foreach $pe_settings[$fieldset].lang[$crt_lang].tags_array as $tag}
  <div><input type="radio" name="price_type" id="price_type" value="{$tag}" {if isset($tmp.price) && $tmp.price==-1 && ( isset($tmp.price_tag) && $tmp.price_tag==$tag)}checked="checked"{/if}/>&nbsp;{$tag}</div>
  {/foreach}
  {/if}

here it turns out that both labels need to set the same values ​​for="price_type" , but then only one will work, and if you replace the second id with for example for="price_type1" then this form will not be transmitted, is it possible to somehow add a value to the label value 1, 2 , 3 , etc? Or what is the way out?

Answer 1

The global id attribute defines a unique identifier (ID) that must be unique throughout the document.
Use other attributes like class or data-*
https://developer.mozilla.org/en-US/docs/Web/HTML/...

Answer 2

I don't see the label tag . If it is inside the loop, then you can put the input inside the label.
Something like

<label>
    <input type="radio" />
    <span></span>
</label>

Then you can style like this:

label {
    position: relative;
}
label span { /* Стиль неактивного баттона */ }
label :checked ~ span { /* Стиль отмеченного радиобаттона */ }