title: what is a way to set an on change event for appended inputs, but separately?
body: <p>I'm trying to set an on change event (via jQuery) to an appended html template that contains inputs.
  currently:</p>
  <p>html</p>
  <pre><code>&lt;div class=&quot;scroller&quot; id='videoInfoColumn' style=&quot;height: 600px; overflow-x: hidden;text-align: left;&quot;&gt;
    &lt;button id=&quot;add-vid-btn&quot;&gt;Add&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>let count = 0;
  let htmlTemplate = `&lt;div&gt;&lt;input id=&quot;vidUpload&quot; type=&quot;file&quot; /&gt;&lt;/div&gt;`
  
  function f_create_video_loaders(count) {
    $(htmlTemplate).appendTo(videoInfoColumn);
    let videoInfoColumn = document.getElementById('videoInfoColumn');
      let vidUploadInput = document.getElementById('vidUpload');
      inputArrays.push(vidUploadInput);
      // console.log(inputArrays)
  
      
      vidUploadInput.setAttribute('id',`vidUpload${count}`)
      // on video upload
      
  // here's where I need to run the on change event whenever a video got uploaded to that specific input.
  
      $('#vidUpload').on('change', (e) =&gt; {
          e.preventDefault();
          let files = e.target.files;
              
          videoInfoColumn.lastElementChild.remove()
          f_select_files(files);
  
          vidUploadInput.value = ''
          
          // // take off the change event
          $('#vidUpload').off('change');
      })
  }
  
  const addVidBtn = document.getElementById('add-vid-btn');
  addVidBtn.addEventListener('click', () =&gt; {
    count++;
    f_create_video_loaders(count)
  })
  </code></pre>
  <p>I'm having trouble trying to:</p>
  <ol>
  <li>setting a unique id of the vidUpload input</li>
  <li>running the on change event for just the specific vidUpload input.</li>
  </ol>
  <p>I tried to set <code>vidUploadInput.setAttribute('id',`vidUpload${count}`)</code>,
  with the count incrementing per each click of the <code>f_create_video_loaders()</code>.
  And then tried to come up with some loop to fire the on change event for whenever an input gets uploaded with a video, but I just can't think of the logic properly.</p>
  <p>At the moment, since all the inputs have the same id, it gives me the same file for each input appended. However, it works fine if I upload a file one by one.
  -Append vidUpload
  -Upload a video
  -Append another vidUpload (via addVidBtn)
  -Upload another video.
  (this works, but not what I need)</p>
  <p>My goal is</p>
  <ul>
  <li>Append x-number of inputs. Click 3 times, append input 3 times.</li>
  <li>Then, upload file in each input one by one before submitting to the back.</li>
  </ul>
  <p>thank you</p>
  <p>EDIT: Current Solution:</p>
  <p>By your help (biberman and others) here is my current solution that seems to be working well.</p>
  <pre><code>function f_create_video_loaders(count) {
  
      // grab the main div to append video information
      const videoInfoColumn = document.getElementById('videoInfoColumn');
      
      // create a separate empty div to hold onto video info
      let myDiv = document.createElement('div');
      myDiv.id = &quot;vidFormContainer_&quot; + count;
  
      // create count_temp arg
      let jg_post_item_count_temp = &quot;jg_postitem_&quot; + count;
      // concat html template w/ set args to newly created div
      myDiv.innerHTML += f_set_html_element_template(count, {name: &quot;no file&quot;}, jg_post_item_count_temp);
      // append div into the main videoInfoColumn div of the html
      videoInfoColumn.append(myDiv);
  
      // create the input
      const vidUploadInput = document.createElement('input');
      vidUploadInput.id = 'vidUpload_' + count;
      vidUploadInput.setAttribute('type', 'file');
      vidUploadInput.setAttribute('accept', 'video/*');
      // console.log(vidUploadInput);
  
      // append the input to proper location in the html template
      let idArr = vidUploadInput.id.split('_');
      let idNum = idArr[1];
      let videoSelectorContainer = document.getElementById('append_video_' + idNum);
      videoSelectorContainer.append(vidUploadInput)
  
      $('#xitm_publish_from_date_' + count).datepicker({
                  format: &quot;yyyy/mm/dd&quot;,
                  language: &quot;ja&quot;,
                  autoclose: true,
                  todayHighlight: true,
                  startView: 1
              });
  
          $('#xitm_publish_to_date_' + count).datepicker({
              format: &quot;yyyy/mm/dd&quot;,
              language: &quot;ja&quot;,
              autoclose: true,
              todayHighlight: true,
              startView: 1
          });
  
      // handle change
      function changeHandler(e) {
          e.preventDefault();
          let files = e.target.files;
  
          //hide video input
          vidUploadInput.style.display = 'none';
  
          // create video player
          let source = document.createElement('video');
          source.id = ''
          source.style.width = '100%';
          source.controls = true;
          source.src = URL.createObjectURL(files[0])
          //append to main video container
          videoSelectorContainer.append(source);
          
          // grab id
          let idArr = vidUploadInput.id.split('_');
          let idNum = idArr[1];
          let fileTitle = document.getElementById('xitm_attachment_file_name_' + idNum);
          // update file title
          fileTitle.value = files[0].name;
  
          let w_count_id = parseInt(f_jg_array_get_max(displaying_video_data_array, &quot;w_count_id&quot;)) + 1;
          let w_counter = w_count_id;
          displaying_video_data_array.push({
              name: files[0].name,
              class: &quot;jg_postitem_&quot; + count,
              upload_name: files[0].name,
              w_count_id: w_count_id,
              video_id: &quot;&quot;
          })
  
          w_video_formData.append('file[]'       , files[0]);
          w_video_formData.append('file_name[]'  , files[0].name);
  
          console.log(w_video_formData);
          // take off the change event
          vidUploadInput.removeEventListener('change', changeHandler)
      }
      
      // inputArrays.unshift(vidUploadInput);
      vidUploadInput.addEventListener('change', changeHandler);
      
  }
  </code></pre>