How to customize Jquery.sumoselect plugin

Question

I use the jQuery SumoSelect plugin, and I want to customize the select tag to custom design.

This is the code:

<div class="select-box-style right">
    <div class="your-list-title">Your Lists</div>
    <select multiple="multiple" class="md_what_get right SlectBox">
        <option selected value="electronics">Electronics</option>
        <option value="games">Video Games</option>
        <option value="books">Books</option>
        <option value="others">Others</option>
    </select>
    <div class="add-list-box">
        <input type="text" class="input-add-list"/>
        <label class="label-spcbtn-blue spr" >Add</label>
    </div>
</div>

I want to customize the plugin like this image:

How can I achieve this?

More information about the plugin:

Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:

<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

SumoSelect and MultipleSelect are both Javascript plugins that "converts" real selects into custom built <div> tags, with javascript to handle the logic. That said, you can either modify/extend those plugins to create the desired or you can build your own "<select> into <div> converter".

But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.