How to optimize the process of updating pictures?

Question

css

There are 2 blocks (table,apple)

<div class="gen table"></div>	
<div class="gen apple"></div>

styles are as follows:

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

there is a group of buttons:

<div class="butt">
    <button id="table1"> Стол 1</button>
    <button id="table2"> Стол 2</button>
    <button id="table3"> Стол 3</button>
    <button id="table4"> Стол 4</button>
    <br>
    <br>
    <button id="apple1"> Яблоко 1</button>
    <button id="apple2"> Яблоко 2</button>
    <button id="apple3"> Яблоко 3</button>
    <button id="apple4"> Яблоко 4</button>
</div>

When the button is clicked, the image in the div changes.

$( "#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 apple block. Pictures of the same size, with transparency.
So how to optimize this process, is there too many pictures? Manually prescribing is not the case. Maybe there are some frameworks, plugins?