'Need code to add just one product to wishlist rather than adding product multiple times

I've made a wishlist which works like it should do by adding the product to the wishlist when I press the heart button. However, I have a minor issue! When I add a product to the wishlist and then click on the heart button again, it adds the same product multiple times which is something I do not want. Can anyone help me find some code that only adds the product once so that if that product is already in the wishlist, it won't add it again. Your help would be greatly appreciated! Thanks.

var wishlistkey = "wishlist";
// try and fetch an existing wishlist from the localStorage.
var wish_list = []; // localStorage.getItem(wishlistkey)

if ($.isEmptyObject(wish_list)) { //nothing was saved previously
  wish_list = new Array()
} else {
  wish_list = JSON.parse(wish_list);
  count_items_in_wishlist_update();
  $('#wish_list_item').html(wish_list);
}


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


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

      wish_list.push($office_str);
      //  localStorage.setItem(wishlistkey, JSON.stringify(wish_list))
      show_message($office_name + " Office Added");
    }
    count_items_in_wishlist_update();
  });

  //adding toggle functionality to the wishlist pannel
  $(".wish_list_heading").on("click", function() {
    if (!$(this).hasClass("up")) {
      $("#wish_list").css("height", "390px");
      $(this).addClass("up");
      $("#wish_list").css("overflow", "auto");
    } else {
      $("#wish_list").css("height", "35px");
      $(this).removeClass("up");
      $("#wish_list").css("overflow", "hidden");
    }

  });
  // Remove function
  $("#wish_list_item").on("click", ".w-premove", function() {
    $office_id = $(this).attr("wpid");
    $("#list_id_" + $office_id).remove();
    wish_list = [];

    $("tr.wishlist-item").each(function(index, el) {
      wish_list.push(el.outerHTML);
    });
    //localStorage.setItem(wishlistkey, JSON.stringify(wish_list));

    show_message("Office removed");
    count_items_in_wishlist_update();

  });
});
//Animation 
function show_message($msg) {
  $("#msg").html($msg);
  $top = Math.max(0, (($(window).height() - $("#msg").outerHeight()) / 2) + $(window).scrollTop()) + "px";
  $left = Math.max(0, (($(window).width() - $("#msg").outerWidth()) / 2) + $(window).scrollLeft()) + "px";
  $("#msg").css("left", $left);
  $("#msg").animate({
    opacity: 0.6,
    top: $top
  }, 400, function() {
    $(this).css({
      'opacity': 1
    });
  }).show();
  setTimeout(function() {
    $("#msg").animate({
      opacity: 0.6,
      top: "0px"
    }, 400, function() {
      $(this).hide();
    });
  }, 2000);
}

//Validation against the amount of product being added
function count_items_in_wishlist_update() {
  $("#listitem").html(wish_list.length);
  if (wish_list.length > 1) {
    $("#p_label").html("Shortlist (");
  } else {
    $("#p_label").html("Shortlist (");
  }
}

button a {
  color: #fff !important;
}

button {
  font-family: 'open sans', sans-serif;
  font-size: 15px;
}

button {
  text-align: center;
  padding: 1px 7px;
  margin: 0 5px 0;
  border: 4px solid #000;
  background-color: #000;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  font-size: 35px;
  color: #fff;
}

#wish_list {
  position: fixed;
  bottom: 0px;
  right: 0px;
  height: 35px;
  width: 400px;
  background: #fff;
  border: 3px solid #22a7c5;
  z-index: 3;
}

#wish_list .wish_list_heading {
  margin: 0px 0px;
  text-align: center;
  color: #fff;
  height: 27px;
  background-color: #22a7c5;
  padding: 6px 3px;
  font-weight: bold;
  cursor: pointer;
  font-size: 18px;
}

#wish_list_item {
  width: 100%;
  text-align: center;
  border-spacing: 0px 4px;
  border-collapse: separate;
}

#msg {
  position: fixed;
  display: none;
  padding: 10px 25px;
  background: #22a7c5;
  border: 1px solid #22a7c5;
  font-size: 18px;
  width: 50%;
  text-align: center;
  font-weight: 700;
  color: #fff;
  z-index: 4;
}

.wishlist-item {
  padding: 10px 5px;
  background: #f1f1f1;
  color: #323470;
}

.w-premove {
  font-size: 20px;
  cursor: pointer;
  width: 7%;
  padding-bottom: 4px;
}

.w-pname {
  font-size: 16px;
  width: 93%;
  text-align: left;
  padding-left: 12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id='msg'></div>
<div id='wish_list' class='col-s'>
  <p class="wish_list_heading">
    <i class="fa fa-heart-o"></i>
    <span id='p_label'>Shortlist (</span>
    <span id='listitem'>0</span>
    <span id='p_label'>)</span>
  </p>
  <table id='wish_list_item' border='0'></table>
</div>

<div class="btn-group">
  <button class='wishlist' title="Add To Shortlist" office_name='Hampton Street' office_id='hamptonstreet'>
        <span><i class="fa fa-heart">❤️</i></span>
      </button>
</div>

javascript

Solution 1:^[1]

I have modified your code a little here is what you need to update: (it checks for include method which returns in true or false based on wether the item is already in the array or not, if its not, it will add item, otherwise)

var wishlistkey = "wishlist";
// try and fetch an existing wishlist from the localStorage.
var wish_list = []; // localStorage.getItem(wishlistkey)

if ($.isEmptyObject(wish_list)) { //nothing was saved previously
  wish_list = new Array()
} else {
  wish_list = JSON.parse(wish_list);
  count_items_in_wishlist_update();
  $('#wish_list_item').html(wish_list);
}


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



  if(!wish_list.includes($office_str))
  {  
        $("#wish_list_item").append($office_str);
        wish_list.push($office_str);
        //  localStorage.setItem(wishlistkey, JSON.stringify(wish_list))
       show_message($office_name + " Office Added");   
  }
  else
  {
       var myIndex = wish_list.indexOf($office_str);
       if (myIndex!==-1)
       wish_list.splice(myIndex, 1);
       $("#wish_list_item").remove();
       show_message("Office removed");
       count_items_in_wishlist_update();
  }

}
    count_items_in_wishlist_update();
  });

  //adding toggle functionality to the wishlist pannel
  $(".wish_list_heading").on("click", function() {
    if (!$(this).hasClass("up")) {
      $("#wish_list").css("height", "390px");
      $(this).addClass("up");
      $("#wish_list").css("overflow", "auto");
    } else {
      $("#wish_list").css("height", "35px");
      $(this).removeClass("up");
      $("#wish_list").css("overflow", "hidden");
    }

  });
// Remove function
  $("#wish_list_item").on("click", ".w-premove", function() {
    $office_id = $(this).attr("wpid");
    $("#list_id_" + $office_id).remove();
    wish_list = [];

    $("tr.wishlist-item").each(function(index, el) {
      wish_list.push(el.outerHTML);
    });
    //localStorage.setItem(wishlistkey, JSON.stringify(wish_list));

    show_message("Office removed");
    count_items_in_wishlist_update();

  });
});
//Animation 
function show_message($msg) {
  $("#msg").html($msg);
  $top = Math.max(0, (($(window).height() - $("#msg").outerHeight()) / 2) + $(window).scrollTop()) + "px";
  $left = Math.max(0, (($(window).width() - $("#msg").outerWidth()) / 2) + $(window).scrollLeft()) + "px";
  $("#msg").css("left", $left);
  $("#msg").animate({
    opacity: 0.6,
    top: $top
  }, 400, function() {
    $(this).css({
      'opacity': 1
    });
  }).show();
  setTimeout(function() {
    $("#msg").animate({
      opacity: 0.6,
      top: "0px"
    }, 400, function() {
      $(this).hide();
    });
  }, 2000);
}

//Validation against the amount of product being added
function count_items_in_wishlist_update() {
  $("#listitem").html(wish_list.length);
  if (wish_list.length > 1) {
    $("#p_label").html("Shortlist (");
  } else {
    $("#p_label").html("Shortlist (");
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Need code to add just one product to wishlist rather than adding product multiple times

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]