I am looking to enhance a standard select element by adding a favorite button that can be toggled on and off for each option. Utilizing Bootstrap for styling, I want to create a user interface element that allows for smooth scrolling through the options and triggers an event when switching to a new element. A key feature I am aiming for is to include a toggle button next to each option to mark it as a "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 the handler
</div>
JAVASCRIPT
$( ".target" ).change(function() {
var e = document.getElementById("scrollbox");
document.getElementById("other").innerHTML = e.value;
});
Seeking guidance on how to implement a toggleable favorite button for each option. Open to exploring alternative solutions that provide similar functionality.