Cleaner way to randomly get a string from multiple arrays with JS/jQuery?
<p>Multiple arrays are automatically generated server side with no way of modifying it with the names: section1, section2, section3 so on and so forth. There is always a minimum of one value per array and a maximum of 50 in each array.</p>

<p>Example array list:</p>

<pre><code>section1 = ['ABC100', 'ABC105', 'ABC209'];
section2 = ['ABC400', 'ABC705', 'ABC629'];
section3 = ['ABC176', 'ABC136', 'ABC279'];
</code></pre>

<p>I currently need to randomly select one value from each array and update an image src attribute. I do have access to the image HTML, so can change classes etc. </p>

<p>Current HTML example:</p>

<pre><code>&lt;div id="wrapper"&gt;
    &lt;img class="section1" src=""&gt;
    &lt;img class="section2" src=""&gt;
    &lt;img class="section3" src=""&gt;
&lt;/div&gt;
</code></pre>

<p>My javascript and jQuery for randomly selecting a value from it's matching array and updating the image src is:</p>

<pre><code>var $pathName = '/images/gallery/';
var $fileExtension = '.jpg';

var $section1R = section1[Math.floor(Math.random()*section1.length)];

var $section2R = section2[Math.floor(Math.random()*section2.length)];

var $section3R = section3[Math.floor(Math.random()*section3.length)];

$('.section1').attr('src', $pathName + $section1R + $fileExtension);
$('.section2').attr('src', $pathName + $section2R + $fileExtension);
$('.section3').attr('src', $pathName + $section3R + $fileExtension);
</code></pre>

<p>This seems really messy. Is there a way of making this cleaner without repeating so much code? I know it works, but I'd like to learn better ways of coding repeated functions.</p>
