Onchange, Onselect show multiple Select ids, values

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.2/multiple-select.min.js"></script>

<select name="garden" id="garden" class="mselect" multiple="multiple">
    <option value='1'>Flowers</option>
    <option value='2'>Shrubs</option>
    <option value='3'>Trees</option>
    <option value='4'>Bushes</option>
    <option value='5'>Grass</option>
    <option value='6'>Dirt</option>
</select>
<div class='mselect_ids'></div><input name="mselect_ids" class="mselect_ids" value="">
<div class='mselect_vals'></div><input name="mselect_vals" class="mselect_vals" value="">

<script>
$('#garden').multipleSelect();

$(".mselect").change(function(){
    var str_ids = str_vals = "";
    $("select option:selected").each(function(){
        str_ids += $(this).val() + ",";
        str_vals += $(this).text() + ",";
    });
    $(".mselect_ids").text(str_ids); $( ".mselect_ids" ).val(str_ids);
    $(".mselect_vals").text(str_vals); $( ".mselect_vals" ).val(str_vals);
}).trigger("change");
</script>