Как я могу сохранить проверенное значение строки в textarea с нумерацией данных

Question

Я использую icheck вместе с датируемыми.В каждой строке есть четыре варианта флажка.Пользователи могут выбирать между четырьмя флажками.Они могут выбрать один или несколько флажков в каждой строке.Выбранные значения флажков собраны в четырех различных полях текстовой области.Если есть только одна страница, проблем нет.Когда несколько страниц передаются на вторую или третью страницу и установлен новый флажок, поле textarea обновляется только этими значениями страницы.Предыдущие значения исчезают.флажки по-прежнему установлены, когда я вернусь на первую страницу.Поле текстовой области обновляется значениями первой страницы только в том случае, если на первой странице выбрана новая строка или если текущий флажок снят.

Как сохранить и обновить значения в значениях текстовой области при изменениях страницыв данных?

<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>