CodePen

HTML

            
              
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              jQuery(document).ready(function($) { 
"use strict";
// This sets up no conflict mode and makse the $ symbol aviable inside the .ready();


// This is the first option an probaly the best if you can add a class to each of your elements.
// also I used the .change instead of .on("change" handler) this is the shortcut.

// For the elementName var I used the plain javascript .slice method to get everthing, but the last 
// letter, concatenated the "Name" string then concatenated the last letter or number in this case 

function onPhotoChange() {
  $(".photoClass").change(function () {
    var elementID = $(this).attr('id'),
    elementName = elementID.slice(0,-1) + "Name" + elementID.slice(-1);
    $(elementName).val($(this).val().replace(/C:\\fakepath\\/i, ''));
  });
}


// If you can't add a class to each image you could create an array, then convert the array to a string and 
// pass the comma separted string into the $ selector. Everything else stayed the same.



function createArray() {
  var myArray =[ "#photo0", "#photo1", ..... , "#photo12"  ],
  selectorList = myArray.toString();
  $(selectorList).change(function () {
    var elementName = $(this).slice(0,-1) + "Name" + $(this).slice(-1);
    $(elementName).val($(this).val().replace(/C:\\fakepath\\/i, ''));
  });

}
 


 // Here is an example of a listner function same concept as above 

 function photoHoverListener() {
    $(".photoClass").hover(function() {
      var elementID = $(this).attr('id'),
      elementName = elementID.slice(0,-1) + "Browse" + elementID.slice(-1);
      $(elementName).toggleClass("btn-inverse");
    });
 }
 onPhotoChange();
 photoHoverListener();
}); // End of .ready(); Can no longer use $ in no conflict mode

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................