var data = { "items": [{ "item": "Item 1", "cost": "100" }, { "item": "Item 2", "cost": "200" }, { "item": "Item 3", "cost": "300" }, { "item": "Item 4", "cost": "400" }, { "item": "Item 5", "cost": "500" }, { "item": "Item 6", "cost": "600" }] }; $('span').on('click', function() { console.info($(this).text()); var item = $(this).text(); });

li { list-style-type: none; } li span { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: left; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; color: #888; background-color: #fff; border-color: #ccc; display: block; width: 40%; }

<ul> <li><span>Item 1</span></li> <li><span>Item 2</span></li> <li><span>Item 3</span></li> <li><span>Item 4</span></li> <li><span>Item 5</span></li> <li><span>Item 6</span></li> </ul>