Survey form point 13 and 14 not working

I’m working on the webform and I can’t get around point 13 ( Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute) and 14 (the same with checkmarks).

I’m doing something wrong but I really can’t grab what it is. The name attributes of the inputs are the same and the browsers selects them without any problems.

The code in question:

            <h3>What was your main priority while buying your product?</h3>
            <label class="containerRadio"><input id="Comfortability" type="radio"      name="priorities"> <span class="checkradio"></span>Comfortability </label>
            <label class="containerRadio"><input id="Cuteness" type="radio"            name="priorities"> <span class="checkradio"></span>Cuteness </label>
            <label class="containerRadio"><input id="Matching" type="radio"            name="priorities"> <span class="checkradio"></span>Matching outfits </label>
            <label class="containerRadio"><input id="Style" type="radio"               name="priorities"> <span class="checkradio"></span>Style </label>
            <label class="containerRadio"><input id="None" type="radio"                name="priorities" checked><span class="checkradio"></span> None/Not listed </label>

            <h3>How did you find us?</h3>
                <label class="containerMark"><input id="social"          type="checkbox" name="communication" checked><span class="checkmark"></span> Social Network </label>
                <label class="containerMark"><input id="friend"          type="checkbox" name="communication"> <span class="checkmark"></span>Friends </label>
                <label class="containerMark"><input id="advertisement"   type="checkbox" name="communication"> <span class="checkmark"></span>Advertisement </label>
                <label class="containerMark"><input id="recommendation"  type="checkbox" name="communication"> <span class="checkmark"></span>Recommendation </label>
                <label class="containerMark"><input id="passedBy"        type="checkbox" name="communication"> <span class="checkmark"></span>Just passed by</label>

The codepen:

I have also tried what the solution suggested here: Survey form project, Probelm on the radio buttons

It said that it may not be working due to the tag being inside the tag. I tried to do this:

            <label class="containerRadio" for="priorities">Comfortability  <input id="Comfortability" type="radio"      name="priorities"> <span class="checkradio"></span>         </label>
            <label class="containerRadio" for="priorities">Cuteness        <input id="Cuteness" type="radio"            name="priorities"> <span class="checkradio"></span>         </label>
            <label class="containerRadio" for="priorities">Matching outfits<input id="Matching" type="radio"            name="priorities"> <span class="checkradio"></span>         </label>
            <label class="containerRadio" for="priorities">Style           <input id="Style" type="radio"               name="priorities"> <span class="checkradio"></span>         </label>
            <label class="containerRadio" for="priorities"> None/Not listed<input id="None" type="radio"                name="priorities"><span class="checkradio"></span>  </label>

But the tester didn’t think it was good and also the custom classes stopped working.

You need to add the value attribute to both the radio and checkbox inputs.

Input radio:
<label class="containerRadio"><input id="Comfortability" type="radio" value="comfortability" name="priorities"> <span class="checkradio"></span>Comfortability</label>

Input checkbox:
<label class="containerMark"><input id="social" value="social" type="checkbox" name="communication" checked><span class="checkmark"></span> Social Network </label>

That was it! Thank you!