diff --git a/erpnext/selling/page/point_of_sale/point_of_sale.js b/erpnext/selling/page/point_of_sale/point_of_sale.js
index 0fa082fddc2..aa78b85bdbd 100644
--- a/erpnext/selling/page/point_of_sale/point_of_sale.js
+++ b/erpnext/selling/page/point_of_sale/point_of_sale.js
@@ -774,7 +774,7 @@ class POSCart {
 						});
 						this.numpad.reset_value();
 					} else {
-						const item_code = this.selected_item.attr('data-item-code');
+						const item_code = unescape(this.selected_item.attr('data-item-code'));
 						const field = this.selected_item.active_field;
 						const value = this.numpad.get_value();
 
@@ -819,7 +819,7 @@ class POSCart {
 	}
 
 	update_item(item) {
-		const $item = this.$cart_items.find(`[data-item-code="${item.item_code}"]`);
+		const $item = this.$cart_items.find(`[data-item-code="${escape(item.item_code)}"]`);
 
 		if(item.qty > 0) {
 			const is_stock_item = this.get_item_details(item.item_code).is_stock_item;
@@ -841,7 +841,7 @@ class POSCart {
 		const rate = format_currency(item.rate, this.frm.doc.currency);
 		const indicator_class = (!is_stock_item || item.actual_qty >= item.qty) ? 'green' : 'red';
 		return `
-			<div class="list-item indicator ${indicator_class}" data-item-code="${item.item_code}" title="Item: ${item.item_name}  Available Qty: ${item.actual_qty}">
+			<div class="list-item indicator ${indicator_class}" data-item-code="${escape(item.item_code)}" title="Item: ${item.item_name}  Available Qty: ${item.actual_qty}">
 				<div class="item-name list-item__content list-item__content--flex-1.5 ellipsis">
 					${item.item_name}
 				</div>
@@ -883,18 +883,18 @@ class POSCart {
 	}
 
 	exists(item_code) {
-		let $item = this.$cart_items.find(`[data-item-code="${item_code}"]`);
+		let $item = this.$cart_items.find(`[data-item-code="${escape(item_code)}"]`);
 		return $item.length > 0;
 	}
 
 	highlight_item(item_code) {
-		const $item = this.$cart_items.find(`[data-item-code="${item_code}"]`);
+		const $item = this.$cart_items.find(`[data-item-code="${escape(item_code)}"]`);
 		$item.addClass('highlight');
 		setTimeout(() => $item.removeClass('highlight'), 1000);
 	}
 
 	scroll_to_item(item_code) {
-		const $item = this.$cart_items.find(`[data-item-code="${item_code}"]`);
+		const $item = this.$cart_items.find(`[data-item-code="${escape(item_code)}"]`);
 		if ($item.length === 0) return;
 		const scrollTop = $item.offset().top - this.$cart_items.offset().top + this.$cart_items.scrollTop();
 		this.$cart_items.animate({ scrollTop });
@@ -909,7 +909,7 @@ class POSCart {
 			'[data-action="increment"], [data-action="decrement"]', function() {
 				const $btn = $(this);
 				const $item = $btn.closest('.list-item[data-item-code]');
-				const item_code = $item.attr('data-item-code');
+				const item_code = unescape($item.attr('data-item-code'));
 				const action = $btn.attr('data-action');
 
 				if(action === 'increment') {
@@ -932,7 +932,7 @@ class POSCart {
 		this.$cart_items.on('change', '.quantity input', function() {
 			const $input = $(this);
 			const $item = $input.closest('.list-item[data-item-code]');
-			const item_code = $item.attr('data-item-code');
+			const item_code = unescape($item.attr('data-item-code'));
 			events.on_field_change(item_code, 'qty', flt($input.val()));
 		});
 
@@ -1200,7 +1200,7 @@ class POSItems {
 		var me = this;
 		this.wrapper.on('click', '.pos-item-wrapper', function() {
 			const $item = $(this);
-			const item_code = $item.attr('data-item-code');
+			const item_code = unescape($item.attr('data-item-code'));
 			me.events.update_cart(item_code, 'qty', '+1');
 		});
 	}
@@ -1226,7 +1226,7 @@ class POSItems {
 		const item_title = item_name || item_code;
 
 		const template = `
-			<div class="pos-item-wrapper image-view-item" data-item-code="${item_code}">
+			<div class="pos-item-wrapper image-view-item" data-item-code="${escape(item_code)}">
 				<div class="image-view-header">
 					<div>
 						<a class="grey list-id" data-name="${item_code}" title="${item_title}">