javascript - Get an list of datas and store in array in jquery -

i have struture of html below,this there list of option

<div class='col-sm-4'>         <div id='selectiondata' class="panel panel-default">             <div class="panel-body">                 <h2 class='headertext'>selections</h2>                 <p style="font-size: 14px;">select apply you.</p>                 <ul>                     <li id="item1" data-cat="fruits">banana</li>                     <li id="item2" data-cat="fruits">pineapple</li>                     <li id="item3" data-cat="fruits">oragne</li>                     <li id="item4" data-cat="fruits">mango</li>                        <li id="item5" data-cat="vegetables">beans</li>                     <li id="item6" data-cat="fruits">jackfruit</li>                     <li id="item7" data-cat="vegetables">carrot</li>                 </ul>             </div>         </div>     </div> 

from above div when user clicks moves adjacent div,this has sturcture below.

 <div id="categories" class="panel-default">                 <div class="panel-body">                     <div class="alert alert-info hidden endmsg">your data categorized. once done, click next button continue.</div>                     <h2 class='headertext'>categories</h2>                     <ul>                         <li id="cat-fruits">                             <span>fruits</span>                             <ul>                                 <li id="item5" data-cat="fruits">mango</li>                                 <li id="item1" data-cat="fruits">banana</li>                                 <li id="item3" data-cat="fruits">oragne</li>                                 <li class="no-expenses" style="display: none;">no items selected</li>                             </ul>                         </li>                         <li id="cat-vegetables">                             <span>vegetables</span>                             <ul>                                 <li id="item4" data-cat="vegetables">beans</li>                                  <li class="no-expenses" style="display: none;">no items selected</li>                             </ul>                         </li>                         <li id="cat-dolls">                             <span>dolls</span>                             <ul>                                 <li class="no-expenses">no items selected</li>                             </ul>                         </li>                         <li id="cat-medical">                             <span>medical</span>                             <ul>                                 <li class="no-expenses">no items selected</li>                             </ul>                         </li>                     </ul>                 </div>             </div> 

jquery function fetch array of data

    function savedata() {     userdata = [];     $('#categories ul li ul li.selected').each(function(index, element) {         if ($.inarray($(this).text(), userdata) < 0) {             userdata.push($(this).html());         }     }); 

i want fetch datas like

 [mango,banana,oragne,beans] 

here having 2 divs,one div shows list of selection shown in below figure, when user click on particular elemnet, elemnet moved next adjacent div(categories).i want datas.

-----------   ---------- |banana    |  | mango   |   |pineapple |  | banana  |   |oragne    |  | oragne  |   |mango     |  | beans   |   |beans     |  |_________| |jackfruit | |carrot    | ----------- 

the above jquery used not fetching data html, how acheive this. please me.

would easier add each item array when item clicked (and doesn't exist yet in array)?

var arr = []; $("#categories [id^=item]").click(function() {    if(arr.indexof($(this).html())<0) arr.push($(this).html()); }) console.log(arr);