jquery - Javascript scrolling select with favorite button -

jquery - Javascript scrolling select with favorite button -

i need add together favorite button can toggled on , off each alternative in standard select. using bootstrap style select. specifically, need create ui element allows me scroll through options , handle event when scroll new element. want extend include toggle button left of each option, can mark alternative "favorite."

html

<form> <select id="scrollbox" multiple class="form-control target"> <option>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> <option>option 5</option> </select> </form> <div id="other"> trigger handler </div>

javascript

$( ".target" ).change(function() { var e = document.getelementbyid("scrollbox"); document.getelementbyid("other").innerhtml = e.value; });

how add together favorite button can toggled on , off each option? open alternative tools emulate behavior.

maybe mean this? have checkbox on div user clicks alternative , class triggers event? within of event can utilize "this" keyword reference item beingness clicked.

jsfiddle demo

html

<form> <div id="scrollbox" class="" sytle="display: block"> <div id="1">option 1 <input type='checkbox' class='handlefavorite'>favorite</div> <div id="2">option 2 <input type='checkbox' class='handlefavorite'>favorite</div> <div id="3">option 3 <input type='checkbox' class='handlefavorite'>favorite</div> <div id="4">option 4 <input type='checkbox' class='handlefavorite'>favorite</div> <div id="5">option 5 <input type='checkbox' class='handlefavorite'>favorite</div> </div> </form>

js

$(".handlefavorite").click(function(){ alert('you clicked me')});

javascript jquery html css twitter-bootstrap