`<div class="picker">
<select class="image-picker stored" name="q1" id="step">
<option data-img-src='img/forms/minimalist.jpg'>1</option>
<option data-img-src='img/forms/minimalist.jpg'>2</option>
<option data-img-src='img/forms/minimalist.jpg'>3</option>
<option data-img-src='img/forms/minimalist.jpg'>4</option>
<option data-img-src='img/forms/minimalist.jpg'>5</option>
<option data-img-src='img/forms/minimalist.jpg'>6</option>
<option data-img-src='img/forms/minimalist.jpg'>7</option>
<option data-img-src='img/forms/minimalist.jpg'>8</option>
</select>
</div>
<script type="text/javascript">
$('#step').change(function() {
var selected = []; // create an array to hold all currently selected motivations
// loop through each available motivation
$('#step option').each(function() {
// if it's selected, add it to the array above
if (this.selected) {
selected.push(this.value);
}
});
// store the array of selected options
localStorage.setItem('step', JSON.stringify(selected));
});
// check for stored motivations
var stored_motivations = JSON.parse(localStorage.getItem('step'));
if (stored_motivations !== null) {
$('#step option').each(function() {
for (var i = 0; i < stored_motivations.length; i++) {
if (this.value == stored_motivations[i]) {
this.selected = true;
$('.thumbnail').addClass('selected');
}
}
});
}
</script>`