title: How to get the value of dynamically created dropdown using javascript? And get all values
body: <ol>
  <li><p>Here the drop down list is created dynamically.</p></li>
  <li><p>We are able to get the first value but rest of the value are displayed same as first value.</p></li>
  <li><p>And we need to concatenate all the values. </p></li>
  <li><p>When we change the number of conditions it's getting added with the existing one. </p></li>
  </ol>
  
  <p>Can anyone help me on these? Note: need solution only in JavaScript.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var counter = 1;
      var str="";
      var con="";
  
      function addInput(divName) {
          var count=document.getElementById("ConditionId").value;
           for(i=1;i&lt;=count;i++)
           {
                var newdiv = document.createElement('div');
                newdiv.innerHTML = "Condition " + (counter + 0) + " &lt;br&gt;&lt;input list='alert' onchange='GetCondition();' id='value'&gt;";
                document.getElementById(divName).appendChild(newdiv);
                counter++;                  
           }                   
      }
  
      function GetCondition() 
      {           
          str = document.getElementById("value").value;
          con=con.concat(str);
          alert(con);
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
          &lt;head&gt;
              &lt;title&gt;Formatter&lt;/title&gt;
              &lt;meta charset="UTF-8"&gt;
              &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;form&gt;
              &lt;div id="dynamicInput"&gt;                  
                  Number of Condition:&lt;input type="number" id="ConditionId" onchange="addInput('dynamicInput');"&gt;
                  
                  &lt;br/&gt;
                 
                  &lt;datalist id='alert'&gt;
                  &lt;option&gt;Demo 1&lt;/option&gt;
                  &lt;option&gt;Demo 2&lt;/option&gt;
                  &lt;option&gt;Demo 3&lt;/option&gt;
                  &lt;option&gt;Demo 4&lt;/option&gt;
                  &lt;option&gt;Demo 5&lt;/option&gt;
                  &lt;option&gt;Demo 6&lt;/option&gt;
                  &lt;/datalist&gt;
           &lt;/div&gt;             
      &lt;/form&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here i'm getting only the first value right, and other value are same as first value.Need it to change as per the selection.</p>