<Creative mode ON>

<style>
	img{
	position: relative;
	top: 0;
	left: -30px;
	}
</style>
	<span class="phone_number">+74951182647<span class="phone_number_active">Показать</span></span><br>
	<span class="phone_number">+74951182647<span class="phone_number_active">Показать</span></span>
	<script>
		[].forEach.call(document.querySelectorAll('.phone_number'),function(el){
			var btn = el.querySelector('.phone_number_active');
			btn.insertAdjacentHTML(\'beforebegin\', \'<img src="https://javascript.ru/forum/image.php?u=40601&dateline=1424365279" alt="" /&gt;\'=);
			var img = el.querySelector('img');
			btn.onclick = e => img.style.display = 'none';
		});
</script>

<Creative mode ON>

<style>
	.phone_number{
	position: relative;
	display: block;
	text-align: right;
	top: 0;
	right: -40px;
	transition: 1s;
	}
</style>
	<span class="phone_number"><span class="phone_number_active">Показать</span>+74951182647</span><br>
	<span class="phone_number"><span class="phone_number_active">Показать</span>+74951182647</span>
	<script>
		[].forEach.call(document.querySelectorAll('.phone_number'),function(el){
			var btn = el.querySelector('.phone_number_active');
			btn.onclick = e => el.style.right = '0';
		});
</script>

Хотелось коротко, получилось как всегда)

<span class="phone_number">+74953332211<span class="phone_number_active"> Показать</span></span><br>
<span class="phone_number">+74953332011<span class="phone_number_active"> Показать</span></span>
<script>
(function() {
  const classNamePhone = 'span.phone_number';      
  const count = 4; // сколько чисел менять
  const hideText = "X".repeat(count); // каким символом менять
  
  document.querySelectorAll(classNamePhone).forEach((item) => {     
    replaceNumber(item);    
    item.lastChild.addEventListener("click", (e) => {
      const parent = e.target.parentElement;
      const fChild = parent.firstChild;
      if (!fChild.__hideNumber) {
        replaceNumber(e.target.parentElement);
        e.target.innerHTML = " Показать";
      } else {
        fChild.nodeValue = fChild.nodeValue.replace(hideText, fChild.__hideNumber);
        fChild.__hideNumber = false;
        e.target.innerHTML = " Скрыть";
      }
    });
  });  
  
  function replaceNumber(item) {
    const val = item.firstChild.nodeValue;
    item.firstChild.__hideNumber = val.substr(-count);
    item.firstChild.nodeValue = val.substr(0, val.length - count) + hideText;
  }
})();
</script>

Мой ответ уже не актуален, но все же отвечу: в яваскрипт ковычки не могут находиться внутри других ковычек такого же типа. Если внешние ковычки одинарные, то внутри нужно ставить двойные, и наоборот. Или экранировать их обратным слэшем.

'<span class="phone_number_xxxx">xxxx</span>'
'<span class=\'phone_number_xxxx\'>xxxx</span>'

В отношении основного вопроса, то для задач "показать/скрыть" есть простое и практичное решение на чистом HTML/CSS - это связка <label> и скрытого checkbox:

<style>
.tel input, .tel input + span {display: none}
.tel input:checked ~ span {display: none}
.tel input:checked + span {display: inline}
</style>

<label class="tel">
    <input type="checkbox"/>
    99922<span>7777   Скрыть</span>
    <span>xxxx   Показать</span>
</label>

Если нужно, чтобы клик срабатывал только один раз, навешиваем на чекбокс простой обработчик:

<input type="checkbox" onchange="if (!this.checked) this.checked = true"/>

Насчет кавычек - смотрите пост 14 в этой теме.
По основной части не столько не актуален, сколько не удовлетворяет условию - не менять html.