Puncutation marks appear in the wrong side inside a right-to-left pharagraph tag in html

I am trying to mix between Hebrew and English within a single right-to-left paragraph tag, but puncuation marks are rendered on the opposite side.

For example, I wish to have the following rendered on the page:

But the double slash punctuation marks which should appear at the far left, are getting switched with the single puncuation mark at the far right, as you can see from running the following code snippet:

I had tried solving the problem using different methods (For example, using the unicode-bidi css property) but none of my attempts have worked.

Note: Changing the original text inside the paragraph tag to include special unicode characters (such as rlm control characters) or dividing the text within the tag into multiple tags is not an option in my case (I am trying to solve this problem without changing the html structure).

Preferably, I would want to solve this problem using only html or css, but also javascript might be an option, if one can’t do it the other ways.