Question: I have these 2 multi-select which works fine when comes to selecting/dis-selecting.

PROBLEM: As long as all options are selected(Coloured blue) before submitting there is no problem but if any one of those selected option (right side) is clicked then only that option would be submitted along with the form while I need the one not selected too (right side).

UPDATE: From the select box on the right is the one from where values would be inserted to db. As long as no value is clicked on right box after being shifted from left box, all values from right box gets inserted to db. But if I click any one valu in right box from total of 5 values, rest for would be dis-selected and only selected one will insert to db.

[![enter image description here](https://i.stack.imgur.com/VPODO.png)](https://i.stack.imgur.com/VPODO.png)

I came up with the solution:

```
$('#formultiselect').click(function(){
    $('#to option').prop('selected', true);
});

```

And 2nd multiselect box:

```
<select multiple id="to" name="topics[]" style="float:left;">

</select>

```

And finally the submit button:

```
<button id="formultiselect" type="submit" class="btn-medium col-sms-6 col-sm-4">UPDATE SETTINGS</button>

```

But, it doesn't work.

Is there anything wrong with my JQuery code? Please assist?

Answer: 
you can try using [Toro Library](https://github.com/eneim/Toro), which solves it very nicely with recyclerview
Look into creating a vertical ListView of VideoViews.