javascript - Adding Multiple value setAttribute on pop up onclick in an input -

i stack in problem solving javascript , need ask advice regarding project. have input called subject , level, in level want add multiple values seperated via comma,

i created function

function selectedlvl($levels){     lvl1.setattribute("value", $levels);     } 

in pop have code user click , updated input. working 1 value. how can add multiple keys seprated in comma, example if clcik each vallue append levels, kindergarten, primary school , on..

        <ul>         <li><a href="#" onclick="selectedlvl('all levels')">all levels</a></li>         <li><a href="#" onclick="selectedlvl('kindergarten')">kindergarten</a></li>         <li><a href="#" onclick="selectedlvl('primary school')">primary school</a></li>         <li><a href="#" onclick="selectedlvl('school years 7,8,9')">school years 7,8,9</a></li>         <li><a href="#" onclick="selectedlvl('gcse – middle school')">gcse – middle school</a></li>         <li><a href="#" onclick="selectedlvl('hkdse')">hkdse</a></li>         <li><a href="#" onclick="selectedlvl('ib, as/a, senior secondary')">ib, as/a, senior secondary</a></li>         <li><a href="#" onclick="selectedlvl('tertiary level')">tertiary level         <li><a href="#" onclick="selectedlvl('test preparation')">test preparation</a></li>         <li><a href="#" onclick="selectedlvl('computer/it')">computer/it</a></li>         <li><a href="#" onclick="selectedlvl('language classes')">language classes</a></li>         <li><a href="#" onclick="selectedlvl('business training')">business training</a></li>         </ul> 

i believe want lvl1 array, or object value array.

with lvl1 array:

var lvl1=[];  function selectedlvl($levels){      lvl1.push( $levels);      console.log(lvl1);  }          

<ul>    <li><a href="#" onclick="selectedlvl('all levels')">all levels</a></li>    <li><a href="#" onclick="selectedlvl('kindergarten')">kindergarten</a></li>    <li><a href="#" onclick="selectedlvl('primary school')">primary school</a></li>    <li><a href="#" onclick="selectedlvl('school years 7,8,9')">school years 7,8,9</a></li>    <li><a href="#" onclick="selectedlvl('gcse – middle school')">gcse – middle school</a></li>    <li><a href="#" onclick="selectedlvl('hkdse')">hkdse</a></li>    <li><a href="#" onclick="selectedlvl('ib, as/a, senior secondary')">ib, as/a, senior secondary</a></li>    <li><a href="#" onclick="selectedlvl('tertiary level')">tertiary level    <li><a href="#" onclick="selectedlvl('test preparation')">test preparation</a></li>    <li><a href="#" onclick="selectedlvl('computer/it')">computer/it</a></li>    <li><a href="#" onclick="selectedlvl('language classes')">language classes</a></li>    <li><a href="#" onclick="selectedlvl('business training')">business training</a></li>  </ul>

with lvl1 object:

var lvl1={};  lvl1.values=[];  function selectedlvl($levels){      var temp=lvl1.values;      temp.push( $levels);      lvl1.values=temp;      console.log(json.stringify(lvl1));  }          

<ul>    <li><a href="#" onclick="selectedlvl('all levels')">all levels</a></li>    <li><a href="#" onclick="selectedlvl('kindergarten')">kindergarten</a></li>    <li><a href="#" onclick="selectedlvl('primary school')">primary school</a></li>    <li><a href="#" onclick="selectedlvl('school years 7,8,9')">school years 7,8,9</a></li>    <li><a href="#" onclick="selectedlvl('gcse – middle school')">gcse – middle school</a></li>    <li><a href="#" onclick="selectedlvl('hkdse')">hkdse</a></li>    <li><a href="#" onclick="selectedlvl('ib, as/a, senior secondary')">ib, as/a, senior secondary</a></li>    <li><a href="#" onclick="selectedlvl('tertiary level')">tertiary level    <li><a href="#" onclick="selectedlvl('test preparation')">test preparation</a></li>    <li><a href="#" onclick="selectedlvl('computer/it')">computer/it</a></li>    <li><a href="#" onclick="selectedlvl('language classes')">language classes</a></li>    <li><a href="#" onclick="selectedlvl('business training')">business training</a></li>  </ul>