Cacher is the code snippet organizer for pro developers

<div class="step-container">
	<input type="hidden" name="quiz_step1" id="quiz_step1" value="" class="required-entry">
    <ul>
    	<li class="circle-btn" data-id="quiz_step1" data-value="1"><span>Oily</span></li>
    	<li class="circle-btn" data-id="quiz_step1" data-value="2"><span>Combination</span></li>
    	<li class="circle-btn" data-id="quiz_step1" data-value="3"><span>Normal</span></li>
    	<li class="circle-btn" data-id="quiz_step1" data-value="4"><span>Dry</span></li>
    	<li class="circle-btn" data-id="quiz_step1" data-value="5"><span>Sensitive</span></li>
    </ul>
</div>

    $('.circle-btn').on('click', function() {
    	var btnValue = $(this).data('value');
    	var inputField = '#' + $(this).data('id');
 	    $(inputField).val( btnValue );
 	    $(this).siblings('.circle-btn').removeClass('selected');
		$(this).addClass('selected');
	});