Добавление Href через JQuery

Question

Я пытаюсь сделать номер телефона кликабельным, используя jquery. Существует код CSS и jquery для создания HTML, однако я не могу добавить href.

Попытка изменить класс span для включения href, когда добавленный номер телефона не отображается

jQuery(document).ready(function() {
  $phone_number2 = "International 00-1-250-586-9928";
  jQuery("span#et-info-phone").after("<span class=info-phone-2>" + $phone_number2 + "</span>");
  jQuery(".info-phone-2").attr("href", "tel:00-1-250-586-9928");
});

span.info-phone-2 {
  position: relative;
}

.info-phone-2:before {
  position: relative;
  top: 2px;
  margin-right: 2px;
  content: "\e090";
}

.info-phone-2 {
  margin-right: 13px;
}

.info-phone-2:before {
  font-family: "ETmodules" !important;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  text-transform: none;
  speak: none;
}

Answer 1

Используйте якорь, а не промежуток.

jQuery(document).ready(function() {
  $phone_number2 = "International 00-1-250-586-9928";
  jQuery("span#et-info-phone").after("<a class=info-phone-2>" + $phone_number2 + "</a>");
  jQuery(".info-phone-2").attr("href", "tel:00-1-250-586-9928");
});

a.info-phone-2 {
  position: relative;
}

.info-phone-2:before {
  position: relative;
  top: 2px;
  margin-right: 2px;
  content: "\e090";
}

.info-phone-2 {
  margin-right: 13px;
}

.info-phone-2:before {
  font-family: "ETmodules" !important;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  text-transform: none;
  speak: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="et-info-phone">Phone: </span>