JSFiddle - React, Tailwind, and code Playground

HTML

<div id="AddToCartPopupOVER04.55.148.00"></div>
<div id="AddToCartPopupOVER04-55-148-00"></div>
<div id="AddToCartPopupOVER04#55#148#00"></div>
<div id="AddToCartPopupOVER04[55[148[00"></div>
<div id="AddToCartPopupOVER04/55/148/00"></div> -->

JavaScript

var str = "#AddToCartPopup";
var variants = {
  dot: "OVER04.55.148.00",
  dash:"OVER04-55-148-00",
  hash: "OVER04#55#148#00",
  bracket: "OVER04[55[148[00",
  backbracket: "OVER04]55]148]00",
  slash: "OVER04/55/148/00",
  colon: "OVER04:55:148:00",
  comma: "OVER04,55,148,00",
  equals: "OVER04=55=148=00",
  atІign: "OVER04@55@148@00",
  slash: "OVER04/55/148/00",
  backslash: "OVER04\55\148\00",
  ampersand: "OVER04&55&148&00",
  apostrophe: "OVER04'55'148'00",
  pipe: "OVER04|55|148|00"
};

// @ts-check
/** 
 * @param {string} str 
 * @return {string}
*/
function jq(str) {
  var reg = /([ #;&,.+*~\':"!^$[\]()=>|\/@])/g;  //g.ivanov update
  return reg.test(str) ? str.replace(reg, "\\$1") : str;
}

function test() {
  for (var variant in variants) {
  	var el =  variants[variant];
  	var jqel = jq(el);
    var elLength = $(str + el).length;
    var jqelLength = $(str + jqel).length;
    
    console.log(variant);
    console.log("$('" + str + el + "')", elLength);
    console.log("$('" + str + jqel + "')", jqelLength);
    console.log("----------------");
  }
}

test();