title: how to give multiple select options for a dropdown created in javascript function
body: <p>I have a javascript function where rows are added dynamically.</p>
  
  <p><a href="https://i.stack.imgur.com/aiOsu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aiOsu.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;script language="javascript"&gt;
     // Add row to the HTML table
  
  
                      function addRow() {    
                          var table = document.getElementById('my_table'); //html table
                          var rowCount = table.rows.length; //no. of rows in table
                          var columnCount =  table.rows[0].cells.length; //no. of columns in table          
                          var row = table.insertRow(rowCount); //insert a row            
  
                          var cell1 = row.insertCell(0); //create a new cell           
                          var element1 = document.createElement("input"); //create a new element           
                          element1.type = "checkbox"; //set the element type 
                          element1.setAttribute('id', 'newCheckbox'); //set the id attribute   
                          element1.setAttribute('checked',true); //set checkbox by default checked  
                          cell1.appendChild(element1); //append element to cell
  
                          var cell2 = row.insertCell(1);            
                          var element2 = document.createElement("input");            
                          element2.type = "text"; 
                          element2.setAttribute('id', 'newInput'); //set the id attribute
                          element2.setAttribute('name', 'sl'+rowCount);
                          element2.setAttribute('style', 'width: 50px');
                          cell2.appendChild(element2);      
  
                          var cell3 = row.insertCell(2);            
                          var element3 = document.createElement("input");            
                          element3.type = "textarea"; 
                          element3.setAttribute('rows', '4');
                          element3.setAttribute('cols','40');
                          element3.setAttribute('id', 'newInput'); //set the id attribute
                          element3.setAttribute('name', 'discription'+rowCount);
                          cell3.appendChild(element3);         
  
                          var cell4 = row.insertCell(3);            
                          var element4 = document.createElement("input");            
                          element4.type = "text"; 
                          element4.setAttribute('id', 'newInput'); //set the id attribute
                          element4.setAttribute('name', 'quantity'+rowCount);
                          cell4.appendChild(element4);
  
  
                          var cell5 = row.insertCell(4);            
                          var element5 = document.createElement("input");            
                          element5.type = "text"; 
                          element5.setAttribute('id', 'newInput'); //set the id attribute
                          element5.setAttribute('name', 'price'+rowCount);
                          cell5.appendChild(element5);
  
  
  
                          var cell6 = row.insertCell(5);            
                          var element6 = document.createElement("input");            
                          element6.type = "text"; 
                          element6.setAttribute('id', 'newInput'); //set the id attribute
                          element6.setAttribute('name', 'CST'+rowCount);
                          element6.setAttribute('style', 'width: 50px');
                          cell6.appendChild(element6);
  
  
                          var cell7 = row.insertCell(6);
                          var element7 =  document.createElement("select");
                          var optarr =  ['vat1','vat2','vat3','vat4','vat5','vat6'];
                          for(var i = 0;i&lt;optarr.length;i++)
                          { 
                           var opt = document.createElement("option");
                           opt.text = optarr[i];
                           opt.value = optarr[i];
                           opt.className = optarr[i];
                           element7.appendChild(opt);
                         } 
  
                         element7.setAttribute('id', 'vat5'); //set the id attribute 
                         element7.setAttribute('name','tax'+rowCount);
                         element7.setAttribute('value','vat5');
                         cell7.appendChild(element7);
  }
  </code></pre>
  
  <p>In the last "cell7" i have drop-down along with options,i am selecting only one option.But i need multiple options to be selected. For example: vat1 and vat3 once,vat3 and vat5 and vat2 once like these.I tried <code>element7.setAttribute("multiple","")</code>.But it is turning into a list in which i dont needed it.So i tried "jquery Multiselect" but it is out of reach for me because i really dont know about jquery and ajax that much.Any help in this one will be really appreciated.</p>
  
  <p><strong>Edit:After using <code>"setAttribute('multiple','')</code></strong></p>
  
  <p><a href="https://i.stack.imgur.com/wcra2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wcra2.png" alt="enter image description here"></a></p>