JQuery does not work correctly everywhere

I am developing a small project on Asp.Net Core I have a piece of HTML code that is automatically generated:

@foreach(var item in list)
{
   <div class="some-code" id="@string.Concat(\"_col_\", @item.code)">*************</div>
   <div class="view-code" id=@item.code></code>
}

In fact, when this code runs, it looks like this in the browser elements:

<div class="some-code" id="_col_t5]y56plK3">*************</div>
  <div class="view-code" id="t5]y56plK3"></code>

  <div class="some-code" id="_col_ye00c8dpo">*************</div>
  <div class="view-code" id="ye00c8dpo"></code>
  ...

In the picture it looks like this

The logic is that when you click on the eye, the stars change to code and vice versa. I did this using a small script:

$(document).ready(function () {
        $(".view-code").on("click", function (e) {
            var mt = "*************"
            var id = "#_col_" + e.target.id;
            if ($(id).text() === mt) {
                $(id).text(e.target.id);
            } else {
                $(id).text(mt);
            }
        });
    })

So for several elements this works (the first 2) and on the rest, when you click on the eye, an error appears in the console and the code does not work.

Uncaught Error: Syntax error, unrecognized expression: #_col_1k]Xrm3rFs

Tell me why this is happening? How to do it so everything worked correctly.