i have switched from fa icon to svg icon everything is working fine but when you click on add to favorite outline icon does not changed to filled red one.
so i have searched and find that i have to use svg both icons like this way.

 $icon = '<svg id="outline" height="20" viewBox="0 -20 480 480" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m348 0c-43 .0664062-83.28125 21.039062-108 56.222656-24.71875-35.183594-65-56.1562498-108-56.222656-70.320312 0-132 65.425781-132 140 0 72.679688 41.039062 147.535156 118.6875 216.480469 35.976562 31.882812 75.441406 59.597656 117.640625 82.625 2.304687 1.1875 5.039063 1.1875 7.34375 0 42.183594-23.027344 81.636719-50.746094 117.601563-82.625 77.6875-68.945313 118.726562-143.800781 118.726562-216.480469 0-74.574219-61.679688-140-132-140zm-108 422.902344c-29.382812-16.214844-224-129.496094-224-282.902344 0-66.054688 54.199219-124 116-124 41.867188.074219 80.460938 22.660156 101.03125 59.128906 1.539062 2.351563 4.160156 3.765625 6.96875 3.765625s5.429688-1.414062 6.96875-3.765625c20.570312-36.46875 59.164062-59.054687 101.03125-59.128906 61.800781 0 116 57.945312 116 124 0 153.40625-194.617188 266.6875-224 282.902344zm0 0"/></svg>
            <svg id="filled" display="none" height="20" viewBox="0 -21 448 448" width="20" fill="#ff6243" xmlns="http://www.w3.org/2000/svg"><path d="m224 406.902344c29.382812-16.214844 224-129.496094 224-282.902344 0-66.054688-54.199219-124-116-124-41.867188.0742188-80.460938 22.660156-101.03125 59.128906-1.539062 2.351563-4.160156 3.765625-6.96875 3.765625s-5.429688-1.414062-6.96875-3.765625c-20.570312-36.46875-59.164062-59.0546872-101.03125-59.128906-61.800781 0-116 57.945312-116 124 0 153.40625 194.617188 266.6875 224 282.902344zm0 0"/></svg>';
      $title = __('Save to favorite');

and i use jquery code

   $('.fi_save_favorite').click(function(e){
    event.preventDefault();
    $('#outline').toggle();
    $('#filled').toggle();   
  });


now the problem when i click add to favorite it switchs from outline icon to filled red one but not toggling data id!
what code should be added to toggle each ad by data id?
Regards.

I have already done this for favorite count in statics like how many ads has been added to favourite.

   $('.fi_save_favorite').click(function(e){
 
    var itemId = $(this).attr('data-item-id');
   var favCount = $(this).attr('data-favo');
    if( $(this).attr('href') != '' ) {   
      window.location.href = $(this).attr('href');
    } else {
      $(this).attr('href', favCount);
      $.ajax({
        url: baseAjaxUrl + "&ajaxFavoClick=1&itemId=" + itemId,
        type: "GET",
        success: function(response){
          //console.log(response);
        }
      });
    }
  });

i have tried this code but not working

   $('.fi_save_favorite').click(function(e){
    event.preventDefault();
    var itemId = $(this).attr('data-item-id');
    $('#outline' + itemId).toggle();
    $('#filled' + itemId).toggle();   
  });

ID should be unique across site.

ID should be unique across site.

Final working code

<svg id="outline' . $item_id . '" data-item-id="' . $item_id . '" height="20" viewBox="0 -20 480 480" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m348 0c-43 .0664062-83.28125 21.039062-108 56.222656-24.71875-35.183594-65-56.1562498-108-56.222656-70.320312 0-132 65.425781-132 140 0 72.679688 41.039062 147.535156 118.6875 216.480469 35.976562 31.882812 75.441406 59.597656 117.640625 82.625 2.304687 1.1875 5.039063 1.1875 7.34375 0 42.183594-23.027344 81.636719-50.746094 117.601563-82.625 77.6875-68.945313 118.726562-143.800781 118.726562-216.480469 0-74.574219-61.679688-140-132-140zm-108 422.902344c-29.382812-16.214844-224-129.496094-224-282.902344 0-66.054688 54.199219-124 116-124 41.867188.074219 80.460938 22.660156 101.03125 59.128906 1.539062 2.351563 4.160156 3.765625 6.96875 3.765625s5.429688-1.414062 6.96875-3.765625c20.570312-36.46875 59.164062-59.054687 101.03125-59.128906 61.800781 0 116 57.945312 116 124 0 153.40625-194.617188 266.6875-224 282.902344zm0 0"/></svg>
            <svg id="filled' . $item_id . '" data-item-id="' . $item_id . '" display="none" height="20" viewBox="0 -21 448 448" width="20" fill="#ff6243" xmlns="http://www.w3.org/2000/svg"><path d="m224 406.902344c29.382812-16.214844 224-129.496094 224-282.902344 0-66.054688-54.199219-124-116-124-41.867188.0742188-80.460938 22.660156-101.03125 59.128906-1.539062 2.351563-4.160156 3.765625-6.96875 3.765625s-5.429688-1.414062-6.96875-3.765625c-20.570312-36.46875-59.164062-59.0546872-101.03125-59.128906-61.800781 0-116 57.945312-116 124 0 153.40625 194.617188 266.6875 224 282.902344zm0 0"/>

html link looks like
<a href="" data-favo="javascript://" data-item-id="229" <a="" class="has-tooltip fi_save_favorite fi_save fi_fav_229" rel="229" title=""><svg id="outline229" data-item-id="229" height="20" viewBox="0 -20 480 480" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m348 0c-43 .0664062-83.28125 21.039062-108 56.222656-24.71875-35.183594-65-56.1562498-108-56.222656-70.320312 0-132 65.425781-132 140 0 72.679688 41.039062 147.535156 118.6875 216.480469 35.976562 31.882812 75.441406 59.597656 117.640625 82.625 2.304687 1.1875 5.039063 1.1875 7.34375 0 42.183594-23.027344 81.636719-50.746094 117.601563-82.625 77.6875-68.945313 118.726562-143.800781 118.726562-216.480469 0-74.574219-61.679688-140-132-140zm-108 422.902344c-29.382812-16.214844-224-129.496094-224-282.902344 0-66.054688 54.199219-124 116-124 41.867188.074219 80.460938 22.660156 101.03125 59.128906 1.539062 2.351563 4.160156 3.765625 6.96875 3.765625s5.429688-1.414062 6.96875-3.765625c20.570312-36.46875 59.164062-59.054687 101.03125-59.128906 61.800781 0 116 57.945312 116 124 0 153.40625-194.617188 266.6875-224 282.902344zm0 0"></path></svg>
            <svg id="filled229" data-item-id="229" display="none" height="20" viewBox="0 -21 448 448" width="20" fill="#ff6243" xmlns="http://www.w3.org/2000/svg"><path d="m224 406.902344c29.382812-16.214844 224-129.496094 224-282.902344 0-66.054688-54.199219-124-116-124-41.867188.0742188-80.460938 22.660156-101.03125 59.128906-1.539062 2.351563-4.160156 3.765625-6.96875 3.765625s-5.429688-1.414062-6.96875-3.765625c-20.570312-36.46875-59.164062-59.0546872-101.03125-59.128906-61.800781 0-116 57.945312-116 124 0 153.40625 194.617188 266.6875 224 282.902344zm0 0"></path></svg> <span>Save to favorite</span></a>


     $('.fi_save_favorite').click(function(e){
   var itemId = $(this).attr('data-item-id');
    $('#outline' + itemId).toggle();
    $('#filled' + itemId).toggle();   
  });

the unique id has been added in svg icon you have opened a bit my brain when you said the id shoud be unique thank you.
Regards.

Less codes
removed data-item-id="' . $item_id . '" from svg code
$icon = '<svg id="outline' . $item_id . '" height="20" viewBox="0 -20 480 480" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m348 0c-43 .0664062-83.28125 21.039062-108 56.222656-24.71875-35.183594-65-56.1562498-108-56.222656-70.320312 0-132 65.425781-132 140 0 72.679688 41.039062 147.535156 118.6875 216.480469 35.976562 31.882812 75.441406 59.597656 117.640625 82.625 2.304687 1.1875 5.039063 1.1875 7.34375 0 42.183594-23.027344 81.636719-50.746094 117.601563-82.625 77.6875-68.945313 118.726562-143.800781 118.726562-216.480469 0-74.574219-61.679688-140-132-140zm-108 422.902344c-29.382812-16.214844-224-129.496094-224-282.902344 0-66.054688 54.199219-124 116-124 41.867188.074219 80.460938 22.660156 101.03125 59.128906 1.539062 2.351563 4.160156 3.765625 6.96875 3.765625s5.429688-1.414062 6.96875-3.765625c20.570312-36.46875 59.164062-59.054687 101.03125-59.128906 61.800781 0 116 57.945312 116 124 0 153.40625-194.617188 266.6875-224 282.902344zm0 0"/></svg>
            <svg id="filled' . $item_id . '" display="none" height="20" viewBox="0 -21 448 448" width="20" fill="#ff6243" xmlns="http://www.w3.org/2000/svg"><path d="m224 406.902344c29.382812-16.214844 224-129.496094 224-282.902344 0-66.054688-54.199219-124-116-124-41.867188.0742188-80.460938 22.660156-101.03125 59.128906-1.539062 2.351563-4.160156 3.765625-6.96875 3.765625s-5.429688-1.414062-6.96875-3.765625c-20.570312-36.46875-59.164062-59.0546872-101.03125-59.128906-61.800781 0-116 57.945312-116 124 0 153.40625 194.617188 266.6875 224 282.902344zm0 0"/></svg>';

and in java as far as im using favorite count
i removed this code

     $('.fi_save_favorite').click(function(e){
   var itemId = $(this).attr('data-item-id');
    $('#outline' + itemId).toggle();
    $('#filled' + itemId).toggle();   
  });

and i have added 2 lines inside

favorite count code so it looks like this now

before

   $('.fi_save_favorite').click(function(e){
 
    var itemId = $(this).attr('data-item-id');
   var favCount = $(this).attr('data-favo');
    if( $(this).attr('href') != '' ) {   
      window.location.href = $(this).attr('href');
    } else {
      $(this).attr('href', favCount);
      $.ajax({
        url: baseAjaxUrl + "&ajaxFavoClick=1&itemId=" + itemId,
        type: "GET",
        success: function(response){
          //console.log(response);
        }
      });
    }
  });

after

   $('.fi_save_favorite').click(function(e){
    var itemId = $(this).attr('data-item-id');
   var favCount = $(this).attr('data-favo');
   $('#outline' + itemId).toggle();
    $('#filled' + itemId).toggle();   
    if( $(this).attr('href') != '' ) {   
      window.location.href = $(this).attr('href');
    } else {
      $(this).attr('href', favCount);
      $.ajax({
        url: baseAjaxUrl + "&ajaxFavoClick=1&itemId=" + itemId,
        type: "GET",
        success: function(response){
          //console.log(response);
        }
      });
    }
  });