How to create select option with div and span tags?

I have a psd like this

I want to create selct option with div and span tags. But it only works in the first row. And the rest of the rows do not work.

html

<div id="count">
	<span class="warranty">1</span>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</div>

css

#count, #province, #city, #neighbourhood {
	background-color: #EEEEEE;
	border: 1px solid #CCCCCC;
	cursor: pointer;
	height: 35px;
	position: relative;
	width: 100px;
	margin: auto;
}

#count:after, #province:after, #city:after, #neighbourhood:after {
	background: transparent url("images/slices.png") no-repeat scroll -33px -464px;
	bottom: 0;
	content: ' ';
	display: block;
	height: 9px;
	left: 5px;
	margin: auto;
	position: absolute;
	top: 0;
	width: 17px;
}

#count span, #province span, #city span, #neighbourhood span {
	position: absolute;
	right: 30px;
	top: 5px;
}

#count ul, #province ul, #city ul, #neighbourhood ul {
	background-color: #FFFFFF;
	box-shadow: 0 2px 2px rgba(0,0,0,.5);
	display: none;
	height: auto;
	margin-top: 36px;
	position: relative;
	z-index: 1;
}

#count li, #province li, #city li, #neighbourhood li {
	background-color: inherit !important;
	border: inherit !important;
	display: block !important;
	float: none !important;
	font-size: inherit !important;
	height: auto !important;
	line-height: inherit !important;
	margin-right: auto !important;
	padding: 2px 5px !important;
	position: inherit !important;
	width: auto !important;
}

#count ul li:hover, #province ul li:hover, #city ul li:hover, #neighbourhood ul li:hover {
	background: #f9f9ff !important;
}

js

$('#count').click(function () {
	var ulTag = $('ul', this);
	ulTag.slideToggle(200);
});

$('#count ul li').click(function () {
	var txtTag = $(this).text();
	$('#count .warranty').text(txtTag);
});