How can I add more elements inside jquery.sumoselect plugin select list?

Question

I want to add more elements inside a list with multiple select checkboxes, but when I add more elements, they appear outside the list.

This is the code I want to put in:

<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 the select option to be displayed like this:

Answer 1

As per your comments if you want to put it inside list you can do it as below:

Put it as first element:

DEMO

$('.spr').on('click',function(){
    if($('.input-add-list').val().trim()!=='')
    {
        $('<option value="'+$('.input-add-list').val().trim()+'">'+$('.input-add-list').val().trim()+'</option>').insertBefore('.SlectBox option:first');
    }
});

Put it as last element

DEMO

$('.spr').on('click',function(){
    if($('.input-add-list').val().trim()!=='')
    {
        $('.SlectBox').append('<option value="'+$('.input-add-list').val().trim()+'">'+$('.input-add-list').val().trim()+'</option>');
    }
});

If possible change your label Add to button

Update

Use your native plugin method as below:

DEMO

$('.spr').on('click',function(){
    if($('.input-add-list').val().trim()!=='')
    {
        $('select.SlectBox')[0].sumo.add($('.input-add-list').val().trim());
    }
});