Unable to keep checked dynamically created checkboxes

I have created dynamic checkboxes for wishlists on blog posts. I want to keep checked boxes checked after page refresh, I have used sessionStorage and even localStorage for this purpose. It make an array of checked checkboxes ids and then get it on page load to keep checked them. I am printing string of ids in console. It is storing and showing all good but unable to perform any method, styling or .prop() method for dynamic checkboxes'ids retrieved from storage. I want to keep checkbox checked as well as keep wishlist icon color changed after page refresh

//here is php code

if(isset($_SESSION['logged-in'])){
            $output .= "<input type='checkbox' id='{$row["post_id"]}' value='0' class='fav-icon-checkbox'>
                        <label class='fav-icon-label' for='{$row["post_id"]}'><i class='fa fa-heart fav-icon'></i></label>";
        }

// and jquery
if (sessionStorage.getItem('checkedList') && $.parseJSON(sessionStorage.getItem('checkedList')).length !== 0)
    {
        var arrChecked = $.parseJSON(sessionStorage.getItem('checkedList'));
        //Convert checked checkboxes array to comma seprated id
        $(arrChecked.toString()).prop('checked', true);
        console.log(arrChecked.toString())
    }

 var checked = [];



  $(document).on('change','.fav-icon-checkbox',function(){
     var target = $(this).next('.fav-icon-label');
   if($(this).is(':checked')) {
    target.css('color','#f7b731');
    checked.push("#" + $(this).attr('id'));
 //   console.log((this))
    sessionStorage.setItem('checkedList', JSON.stringify(checked));
   }
   else{
     target.css('color','#9d9e9e') 
   }

  })

/