Same behavior apply to different elements
<p>For <code>div.spot1</code> and <code>div.spot2</code> I want the same behaviors - hide delete button when image input is empty, show delete btn when image is uploaded, change image src when image is uploaded, click delete btn to send ajax request to server etc. Of course I can copy/paste js code of spot1 to spot2, only changing the class from <code>first</code> to <code>second</code>. But say I have 4 spots like this, then I will have four almost identical code in my js file. I fear that's not the best practice. What should I do?</p>

<p>HTML:</p>

<pre><code>    &lt;form class='upload' action="" method="POST" enctype="multipart/form-data"&gt;
        &lt;div class="spot1"&gt;
            &lt;span class='filename first'&gt;FILE 1&lt;/span&gt;
            &lt;button type='button' class='delete first'&gt;&amp;#x274C&lt;/button&gt;
            &lt;input type="file" name="image" class="input first" accept="image/*"&gt;
            &lt;input type="button" value="+" class="browse first"/&gt; 
            &lt;a href="{{ourl}}" class="fancybox" title="{{title}}"&gt;&lt;img class="tn first" src="{{turl}}"&gt;&lt;/a&gt;
            &lt;span class="status first"&gt;&lt;/span&gt;
        &lt;/div&gt;

        &lt;div class="spot2"&gt;
            &lt;span class='filename second'&gt;FILE 1&lt;/span&gt;
            &lt;button type='button' class='delete second'&gt;&amp;#x274C&lt;/button&gt;
            &lt;input type="file" name="image" class="input second" accept="image/*"&gt;
            &lt;input class="browse second" type="button" value="+"/&gt; 
            &lt;a href="{{ourl}}" class="fancybox" title="{{title}}"&gt;&lt;img class="tn second" src="{{turl}}"&gt;&lt;/a&gt;
            &lt;span class="status second"&gt;&lt;/span&gt;
        &lt;/div&gt;
    &lt;/form&gt;
</code></pre>

<p>Part of the JS (just for making an example):</p>

<pre class="lang-js prettyprint-override"><code>if ( $('.tn.first').attr('src') == "") {
    ...
}

$('.browse.first').on("click", function () {
    $('.input.first').click();
 });

$('.input.first').on('change', function () {
...
};
</code></pre>
