Double click word JavaScript window.getSelection in two INS tag

Question

My HTML is:

<p><ins data-id="1">111</ins><ins data-id="2">222</ins></p>

The output of this code is:

If I double click the word, it's selecting the complete word, like this:

But I want to select the letters based on the INS tag data-id

Ex:- if I double click the 111 I want to select only 111 like this:

How to modify the default double click selection to JavaScript selection?

I tried the following code:

var containerid = $(e.currentTarget);
if (window.getSelection) {
   var range = document.createRange();
   range.selectNode(containerid);
   var sel = window.getSelection()
   sel.removeAllRanges();
   sel.addRange(range);
}

But it's not working as expected.

Answer 1

<p><ins data-id="1">111</ins>&#8203;<ins data-id="2">222</ins></p>

You could just put a zero-width space between them: ​