How to optimize the process of updating the pictures?

There are 2 blocks (table,apple)
<div class="gen table"></div> 
<div class="apple gen"></div>

styles the following:

 width: 50%;
 height: 50%;
 position: absolute;
 background-image: url("table/1.png");
 background-image: url("apple/1.png");

there is a group of buttons:
<div class="butt">
 <button id="table1"> Table 1</button>
 <button id="table2"> Table 2</button>
 <button id="table3"> Table 3</button>
 <button id="table4"> Table 4</button>
<br / >
<br / >
 <button id="apple1"> Apple 1</button>
 <button id="apple2"> Apple 2</button>
 <button id="apple3"> Apple 3</button>
 <button id="apple4"> Apple 4</button>

Pressing the button changes the picture in the div.
$( "#table1" ).click(function() {
 $( ".table" ).css( "background-image",' url("table/1.png")' );
 $( "#table2" ).click(function() {
 $( ".table" ).css( "background-image",' url("table/2.png")' );
 $( "#table3" ).click(function() {
 $( ".table" ).css( "background-image",' url("table/3.png")' );
 $( "#table4" ).click(function() {
 $( ".table" ).css( "background-image",' url("table/4.png")' );

And similarly for the unit of apple. Images of the same size, with transparency.
So as this process of optimization is the number of images is too much? Manually register not the case. We can have any frameworks, plugins?
June 7th 19 at 14:28
1 answer
June 7th 19 at 14:30
Not very clear what you want but for example here is an example for educational purposes

Find more questions by tags JavaScriptHTMLCSS