Question Selector

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<div class="questionWrapper">
	<p>SINGLE - What Year Is It?</p>
    <input id="40" type="text" />
	<ul class="singleChoice" data-question="#40">
		<li>1913</li>
		<li>2013</li>
		<li>2113</li>
	</ul>
</div>
		
<div class="questionWrapper">
   <p>MULTI - Question 2</p>
    <input id="41" type="text" />
	<ul class="multiChoice" data-question="#41">
		<li>Option1</li>
		<li>Option2</li>
		<li>Option3</li>
	</ul>
</div>

<div class="questionWrapper">
   <p>SORTABLE - Question 3</p>
    <input id="42" type="text" />
	<ul class="sortable" data-question="#42">
		<li>Option1</li>
		<li>Option2</li>
		<li>Option3</li>
	</ul>
</div>

CSS

.ui-selected { color:red; }
.questionWrapper { border: 1px solid green; padding: 5px; margin: 5px; }
li { cursor: pointer; }

JavaScript

$("ul.singleChoice li").click(function() {
    $(this).addClass("ui-selected").siblings().removeClass("ui-selected");
    var question = $(this).parent('ul').data('question');
    $(question).val($(this).text());
});

$("ul.multiChoice li").click(function() {
    $(this).toggleClass('ui-selected');
    
    var question = $(this).parent('ul');
    var selected = new Array();
    question.children('li.ui-selected').each(function() {
        selected.push($(this).text());
    });
    
    $(question.data('question')).val(selected.join('|'));
});

$("ul.sortable").sortable();

$('this').click(function() {
    alert('ok now');
   
  });