Removed Contents replaced back after hitting back button in jquery

i have a two columns where i will move selected field from one column to another column after clicking on next button and if i come back all moved fields will be present.

Image 1 shows how it is before clicking on next button.(working fine)

Image 2 shows after clicking on next button and coming back to first page

Column 1 HTMl

<div class="menu">
    <select multiple="multiple" id='lstBox1' >
</select>

Column 1 JS code

self.firmData.forEach(function (data) {             
 $("#lstBox1").append($('<option class="items">').text(data.DisplayName).attr('value', data.DisplayName));                        
  });

2nd column HTML

<div class="menu">
    <select multiple="multiple" id='lstBox2' >
</select>

2nd column JS code

self.data.forEach(function (data) { 
$("#lstBox2").append($('<option class="items">').text(data.columnsexpo).attr('value', data.columnsexpo));
 });

NOTE

self.data and self.firmData values are coming from api

from Removed Contents replaced back after hitting back button in jquery