title: How to insert and get the value of a dynamically created input field using javascript?
body: <p>I am creating inputs dynamically depending on a radio button that's clicked and I am having trouble getting the value that is inserted in the input field. I need to print the value that is inserted in a label field that is also created dynamically. It looks like this: <a href="https://codepen.io/christmastrex/pen/jOmxmQY" rel="nofollow noreferrer">https://codepen.io/christmastrex/pen/jOmxmQY</a></p>
  <p>So, if it's selected number 4, 4 input fields are created, and in column 3 I need to print the values inserted in the input fields.</p>
  <p>Here is the code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;column&quot;&gt;
          &lt;h2&gt;Column 1&lt;/h2&gt;
  
          &lt;div&gt;
              &lt;input type=&quot;radio&quot; value=&quot;1&quot; name=&quot;col1&quot;&gt;&lt;label for=&quot;1&quot;&gt;1&lt;/label&gt;
              &lt;input type=&quot;radio&quot; value=&quot;2&quot; name=&quot;col1&quot;&gt;&lt;label for=&quot;2&quot;&gt;2&lt;/label&gt;
              &lt;input type=&quot;radio&quot; value=&quot;3&quot; name=&quot;col1&quot;&gt;&lt;label for=&quot;3&quot;&gt;3&lt;/label&gt;
              &lt;input type=&quot;radio&quot; value=&quot;4&quot; name=&quot;col1&quot;&gt;&lt;label for=&quot;4&quot;&gt;4&lt;/label&gt;
              &lt;input type=&quot;radio&quot; value=&quot;5&quot; name=&quot;col1&quot;&gt;&lt;label for=&quot;5&quot;&gt;5&lt;/label&gt;
          &lt;/div&gt;
  
          &lt;button type=&quot;button&quot;&gt;Add&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;column&quot; style=&quot;background-color:#ccc;&quot;&gt;
          &lt;h2&gt;Column 2&lt;/h2&gt;
          &lt;div class=&quot;add-input&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;column&quot;&gt;
          &lt;h2&gt;Column 3&lt;/h2&gt;
          &lt;div class=&quot;add-label&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.column {
      float: left;
      width: 30%;
      padding: 10px;
  }
  
  .row:after {
      content: &quot;&quot;;
      display: table;
      clear: both;
  }
  
  #col2 {
      display: none;
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>var inputDiv = document.getElementsByClassName(&quot;add-input&quot;)[0];
  var inputLabel = document.getElementsByClassName(&quot;add-label&quot;)[0];
  var btn = document.querySelector('button[type=&quot;button&quot;]');
  
  btn.onclick = function () {
      var radioCheckedNum = document.querySelector('input[type=&quot;radio&quot;]:checked')
      .value;
  
      for (let i = 0; i &lt; radioCheckedNum; i++) {
          var inputFieldValue;
          inputDiv.innerHTML += `&lt;input type=&quot;text&quot; id=&quot;&quot; value=&quot;&quot; name=&quot;col2&quot; onChange=&quot;${inputFieldValue}&quot;&gt;&lt;br&gt;&lt;br&gt;`;
          inputFieldValue = document.querySelector('input[name=&quot;col2&quot;]').value;
          
          console.log(inputFieldValue);
          
          inputLabel.innerHTML += `&lt;label&gt;Label ${radioCheckedNum} - ${inputFieldValue}&lt;/label&gt;&lt;br&gt;&lt;br&gt;`;
      }
  };
  </code></pre>