title: how to use one function for multiple file upload buttons
body: <p>I have four upload buttons with their respective ids. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="card-body"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-6"&gt;
                  &lt;div class="mainDiv" align="right"&gt;
                      &lt;progress id="uploader" value="0" max="100"&gt;0%&lt;/progress&gt;
                      &lt;input type="file" id="fileButton" value="upload" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-6"&gt;
                  &lt;div class="mainDiv" align="right"&gt;
                      &lt;progress id="uploader" value="0" max="100"&gt;0%&lt;/progress&gt;
                      &lt;input type="file" id="fileButton" value="upload" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-6"&gt;
                  &lt;div class="mainDiv" align="right"&gt;
                      &lt;progress id="uploader2" value="0" max="100"&gt;0%&lt;/progress&gt;
                      &lt;input type="file" id="fileButton2" value="upload" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-6"&gt;
                  &lt;div class="mainDiv" align="right"&gt;
                      &lt;progress id="uploader3" value="0" max="100"&gt;0%&lt;/progress&gt;
                      &lt;input type="file" id="fileButton3" value="upload" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am able to upload to firebase storage through one button with this function</p>
  
  <pre><code>$("#fileButton").on('change', function(e) {
      var file = evt.target.files[0];
      var storageRef = firebase.storage().ref('img/' + file.name);
      var task = storageRef.put(file);
      task.on('state_changed', function progress(snapshot) {
          var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          uploader.value = percentage;
      }, function error(err) {
  
      }, function complete() {
  
      });
  })
  </code></pre>
  
  <p>the function works great but what I want to do is to prevent duplicating functions. I want to use that function for each of the upload input and uploader status. 
  I tried this but it does not work</p>
  
  <pre><code> $("#fileButton0", "#fileButton1", "#fileButton2", "#fileButton3").on('change'
  </code></pre>
  
  <p>how could I use the same function for each of the upload and uploader?</p>
  
  <p>here is the jsfiddle
  <a href="https://jsfiddle.net/dhs8g7fb/" rel="nofollow noreferrer">https://jsfiddle.net/dhs8g7fb/</a></p>