How do you add toggle functionality to a wishlist button to add and remove items from a wishlist?

I have made a wishlist where I add items to a wishlist by a button and remove the items from within the wishlist itself by pressing a cross next to the item. However, I need the button to add AND remove items too by having a toggle functionality on the button itself. Can anybody help?

$(document).ready(function() {
      $(".wishlist").on("click", function() {
        $data = "";
        $item_id = $(this).attr("item_id");
        $item_name = $(this).attr("item_name");
        $item_str = "<tr class='wishlist-item' id='list_id_" + $item_id + "'><td class='w-pname'>" + $item_name + "</td><td class='w-premove' wpid='" + $item_id + "'>x</td></tr>";
        //check if the element is in the array
        if ($.inArray($item_id, wish_list) == -1) {


          $("#wish_list_item").append($item_str);

          wish_list.push($item_str);
          localStorage.setItem(wishlistkey, JSON.stringify(wish_list))
          show_message($item_name + " Item Added");
        }
        count_items_in_wishlist_update();
      });