title: How to minimize code based on selector in jQuery
body: <p>jQuery script code:</p>
  
  <pre><code>$(function() {
     $('#html_btn1').change(function(){
  
          var val = $(this).val();
          switch(val.substring(val.lastIndexOf('.')+1).toLowerCase()){
          case 'jpg' : 
          case 'png' :
          case 'gif' :
          case 'jpeg' : showimagepreview1(this); break;
          default : $('#errorimg').html("Invalid Photo"); break;
          }
  
      });
  
      $('#html_btn2').change(function(){
  
          var val = $(this).val();
          switch(val.substring(val.lastIndexOf('.')+1).toLowerCase()){
          case 'jpg' : 
          case 'png' :
          case 'gif' :
          case 'jpeg' : showimagepreview2(this); break;
          default : $('#errorimg').html("Invalid Photo"); break;
          }
  
      });
  
      $('#html_btn3').change(function(){
  
          var val = $(this).val();
          switch(val.substring(val.lastIndexOf('.')+1).toLowerCase()){
          case 'jpg' : 
          case 'png' :
          case 'gif' :
          case 'jpeg' : showimagepreview3(this); break;
          default : $('#errorimg').html("Invalid Photo"); break;
          }
      });
  
      function showimagepreview1(input) {
          if (input.files &amp;&amp; input.files[0]) {
              var filerdr = new FileReader();
              filerdr.onload = function(e) {
                  $('#cu1').attr('src', e.target.result);
              };
              filerdr.readAsDataURL(input.files[0]);
          }
      }
  
      function showimagepreview2(input) {
  
          if (input.files &amp;&amp; input.files[0]) {
              var filerdr = new FileReader();
              filerdr.onload = function(e) {
                  $('#cu2').attr('src', e.target.result);
              };
              filerdr.readAsDataURL(input.files[0]);
          }
      }
  
      function showimagepreview3(input) {
  
          if (input.files &amp;&amp; input.files[0]) {
              var filerdr = new FileReader();
              filerdr.onload = function(e) {
                  $('#cu3').attr('src', e.target.result);
              };
              filerdr.readAsDataURL(input.files[0]);
          }
      }
  });
  </code></pre>
  
  <p>HTML markup:</p>
  
  <pre><code> &lt;div class="form-group"&gt;
        &lt;img id="cu1" src="upload-photo-img.jpg"/&gt;
             &lt;input type="file" path="images" id="html_btn1" /&gt;
       &lt;img id="cu2" src="upload-photo-img.jpg"/&gt;
             &lt;input type="file" path="images" id="html_btn2" /&gt;
        &lt;img id="cu3" src="upload-photo-img.jpg"/&gt;
             &lt;input type="file" path="images" id="html_btn3" /&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Above code works fine whenever I am trying to upload image it checks validate and preview the image</p>
  
  <p>But I want to minimize my code as only one change function and only one showimagepreview function</p>
  
  <p>Please give me an idea how to achieve? </p>