How could I store row checked value in textarea with datatabel pagination

I'm using icheck along with datatable. There are four different checkbox options per line. Users can choose between the four checkboxes. They can select one or more checkboxes on each line. The selected checkbox values are collected in four different textarea fields. If there is only one page, there is no problem. When multiple pages are passed to the second or third page and a new checkbox is checked, the textarea field is updated with these page values only. Previous values disappear. checkboxes are still selected when I return to the first page. The textarea field is updated with the first page values only when a new line is selected on the first page or when the current checkbox is unchecked.

How can I maintain and update the values in the textarea values with page changes in datatable?

<table class="table dataTables-example">
    <thead>
        <tr>
            <th>ID</th>
            <th>Function</th>
            <th>Price</th>
            <th>IY</th>
            <th>PT</th>
            <th>ET</th>
            <th>KO</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td><input name="CB1" id="IY1" type="checkbox" value="IY=1"></td>
        <td><input name="CB2" id="PT1" type="checkbox" value="PT=1"></td>
        <td><input name="CB3" id="ET1" type="checkbox" value="ET=1"></td>
        <td><input name="CB4" id="KO1" type="checkbox" value="KO=1"></td>
    </tr>
    <tr>
        <td><input name="CB1" id="IY2" type="checkbox" value="IY=2"></td>
        <td><input name="CB2" id="PT2" type="checkbox" value="PT=2"></td>
        <td><input name="CB3" id="ET2" type="checkbox" value="ET=2"></td>
        <td><input name="CB4" id="KO2" type="checkbox" value="KO=2"></td>
    </tr>
    <tr>
        <td><input name="CB1" id="IY3" type="checkbox" value="IY=3"></td>
        <td><input name="CB2" id="PT3" type="checkbox" value="PT=3"></td>
        <td><input name="CB3" id="ET3" type="checkbox" value="ET=3"></td>
        <td><input name="CB4" id="KO3" type="checkbox" value="KO=3"></td>
    </tr>
    <tr>
        <td><input name="CB1" id="IY4" type="checkbox" value="IY=3"></td>
        <td><input name="CB2" id="PT4" type="checkbox" value="PT=3"></td>
        <td><input name="CB3" id="ET4" type="checkbox" value="ET=3"></td>
        <td><input name="CB4" id="KO4" type="checkbox" value="KO=3"></td>
    </tr>   
    </tbody>
</table>

<textarea id="ResultBox1"></textarea><strong> ResultBox1 - IY / Total: <span class="RS1"></span> Checkbox selected.</strong><br>
<textarea id="ResultBox2"></textarea><strong> ResultBox2 - PT / Total: <span class="RS2"></span> Checkbox selected .</strong><br>
<textarea id="ResultBox3"></textarea><strong> ResultBox3 - ET / Total: <span class="RS3"></span> Checkbox selected .</strong><br>
<textarea id="ResultBox4"></textarea><strong> ResultBox4 - KO / Total: <span class="RS4"></span> Checkbox selected .</strong><br>

<script type="text/javascript" src="css/DataTables/datatables.min.js"></script>
<script>
$(document).ready(function(){
    $('.dataTables-example').DataTable({
        pageLength: 10,
        responsive: true,
        dom: '<"html5buttons"B>lTfgitp',
        buttons: [
            { extend: 'copy'},
            {extend: 'csv'},
            {extend: 'excel', title: 'ExampleFile'},
            {extend: 'pdf', title: 'ExampleFile'},

            {extend: 'print',
             customize: function (win){
                    $(win.document.body).addClass('white-bg');
                    $(win.document.body).css('font-size', '10px');

                    $(win.document.body).find('table')
                            .addClass('compact')
                            .css('font-size', 'inherit');
            }
            }
        ],
       'drawCallback': function(settings){
          //iCheck for checkbox and radio inputs
          $('input[type="checkbox"]').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green'
          });
       }        

    });

});


</script>
<!-- iCheck -->
<script src="js/plugins/iCheck/icheck.min.js"></script>
<script>
$('.i-checks').on('ifChanged', function(event) {
  updateAllChecked1();
  updateAllChecked2();
  updateAllChecked3();
  updateAllChecked4();
});
function updateAllChecked1() {
  $('#ResultBox1').text('');
  $("input[name=CB1]").each(function() {
    if (this.checked) {
      let old_text = $('#ResultBox1').text() ? $('#ResultBox1').text() + ',' : '';
      $('#ResultBox1').text(old_text + $(this).val());
    }
  })
}
function updateAllChecked2() {
  $('#ResultBox2').text('');
  $("input[name=CB2]").each(function() {
    if (this.checked) {
      let old_text = $('#ResultBox2').text() ? $('#ResultBox2').text() + ',' : '';
      $('#ResultBox2').text(old_text + $(this).val());
    }
  })
}
function updateAllChecked3() {
  $('#ResultBox3').text('');
  $("input[name=CB3]").each(function() {
    if (this.checked) {
      let old_text = $('#ResultBox3').text() ? $('#ResultBox3').text() + ',' : '';
      $('#ResultBox3').text(old_text + $(this).val());
    }
  })
}
function updateAllChecked4() {
  $('#ResultBox4').text('');
  $("input[name=CB4]").each(function() {
    if (this.checked) {
      let old_text = $('#ResultBox4').text() ? $('#ResultBox4').text() + ',' : '';
      $('#ResultBox4').text(old_text + $(this).val());
    }
  })
}   
</script>
<script>
    $('input[name=CB1]').on('ifChanged', function(event){
      var countChecked = function() {
      var n = $( "input[name=CB1]:checked" ).length;
      $( ".RS1" ).text( n + ( " Item" ));
    };
    countChecked();
        $( "input[name=CB1]" ).on( "click", countChecked );
    });
    $('input[name=CB2]').on('ifChanged', function(event){
      var countChecked = function() {
      var n = $( "input[name=CB2]:checked" ).length;
      $( ".RS2" ).text( n + ( " Item" ));
    };
    countChecked();
        $( "input[name=CB2]" ).on( "click", countChecked );
    });
    $('input[name=CB3]').on('ifChanged', function(event){
      var countChecked = function() {
      var n = $( "input[name=CB3]:checked" ).length;
      $( ".RS3" ).text( n + ( " Item" ));
    };
    countChecked();
        $( "input[name=CB3]" ).on( "click", countChecked );
    }); 
    $('input[name=CB4]').on('ifChanged', function(event){
      var countChecked = function() {
      var n = $( "input[name=CB4]:checked" ).length;
      $( ".RS4" ).text( n + ( " Item" ));
    };
    countChecked();
        $( "input[name=CB4]" ).on( "click", countChecked );
    });
</script>