InnerHTML не отображает содержимое второго элемента <span> в <div>

Я пытаюсь показать текст внутри элемента <span> внутри раскрывающегося списка в мобильном представлении. Я могу сделать это здесь, в этом jfiddle, но приложение, которое у меня есть (с той же логикой), НЕ будет отображать текст во втором <span> каждого <div> внутри #testing2 <div>.

По сути, вместо того, чтобы видеть раскрывающееся меню с «первым диапазоном первого div (второй диапазон первого div)» и «первым диапазоном второго div (второй диапазон второго div)», содержимое второго <span> вырезается, и все, что я вижу, это окружающие круглые скобки, например: "first div first span()" и "second div second span()".

Вот пример кода:

$(document).ready(function() {
  //create selcts
  var sel = $('<select id = "testing3"/>');
  $("#testing2 div ").each(function() {
    sel.append(
      "<option>" + this.innerHTML + "</option>"
    );
  });
  $(".main_div").append(sel); //append in main div
  $("#testing3").hide() //hide it by default
  $(window).on("resize", function() {
    var $theWindowSize = $(this).width();
    if ($theWindowSize <= 700) {
      $("#testing3").show() //show or hide same
      $("#testing2").hide()
    } else if ($theWindowSize >= 701) {
      $("#testing3").hide()
      $("#testing2").show()
    }
  });
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "main_div">
  <div id = "testing2">
    <div><span>first div first span (</span><span>first div second span</span>)</div>
    <div><span>second div first span (</span><span>second div second span</span>)</div>
  </div>
</div>

Любые идеи относительно того, почему я не вижу содержимое второго диапазона в каждом div с двумя диапазонами с помощью этого кода?

Вы можете использовать Фрагмент стека, чтобы опубликовать здесь скрипку вместо jsfiddle.

— 13.12.2020 01:35

Спасибо, теперь людям просто нужно запустить фрагмент кода в полноэкранном режиме, чтобы увидеть отзывчивость (однако это не относится к моему вопросу).

— 13.12.2020 01:38

<span> внутри <option> недопустимый HTML.

— 13.12.2020 01:42

Когда я запускаю это в Chrome, диапазоны удаляются, и он просто помещает текст в параметры.

— 13.12.2020 01:43

Где находится #testing3 в HTML?

— 13.12.2020 01:44

Есть ли способ просмотреть полную страницу на jsfiddle?

— 13.12.2020 01:53

jquery

13.12.2020 01:30