jquery перетаскивается с проблемой выбора содержимого ddmenu datatarget

Question

Итак, я собираю простой одностраничный конструктор каркасов с перетаскиванием и не могу заставить его содержимое работать должным образом. Закинул на jfiddle, подумал, что проще будет увидеть, чем объяснить проблему. : / Я не уверен, что клонированный элемент не обрабатывает целевые данные должным образом, я удостоверился, что все связанные идентификаторы уникальны, но может ли дублированный идентификатор клона нарушить его и вызвать зеркальное отображение, которое происходит при выборе целевых данных? Нужно ли мне каким-то образом заменить имена целевого класса и соответствующее имя класса для обрабатываемого блока содержимого - и заменить их в клоне уникальными именами классов для каждого целевого параметра div / option? Надеюсь, это имеет смысл.

https://jsfiddle.net/patricktrefry/j58hx3v9/29/

\\

            <!-- CONTENT TOGGLE DROP DOWN MENU -->
            <select class="div-toggle" data-target=".contentBlockOne">

              <option value="text"      data-show=".text"     >Text</option>
              <option value="image"     data-show=".image"    >Image</option>
              <option value="slideshow" data-show=".slideshow">Slideshow</option>
              <option value="video"     data-show=".video"    >Video</option>

            </select>
            <!-- END TOGGLE DROP DOWN MENU --> 

            <!-- DISPLAY CONTENT OPTIONS TILE -->
            <div class="dummyContent contentBlockOne"> 

              <!-- TEXT CONTENT BLOCK -->
              <div class="type text hide">
                <h2>Headline</h2>
                <p>Nam sed hendrerit justo, quis pellentesque lorem. Nam ultricies felis orci, vitae lobortis magna commodo vulputate.</p>
                <p>Nam sed hendrerit justo, quis pellentesque lorem. Nam ultricies felis orci, vitae lobortis magna commodo vulputate.</p>
              </div>
              <!-- END TEXT BLOCK --> 

              <!-- IMAGE CONTENT BLOCK -->
              <div class="type image hide"> 
                <!-- BG IMAGE/ICON --> 
              </div>
              <!-- END IMAGE BLOCK --> 

              <!-- SLIDESHOW CONTENT BLOCK -->
              <div class="type slideshow hide">
                <div class="arrow-left"></div>
                <div class="arrow-right"></div>
                <div class="pagination"></div>
              </div>
              <!-- END SLIDESHOW BLOCK --> 

              <!-- VIDEO CONTENT BLOCK -->
              <div class="type video hide"> 
                <!-- BG IMAGE/ICON --> 
              </div>
              <!-- END VIDEO BLOCK --> 

            </div>
            <!-- END DUMMY CONTENT --> 
          </li> <!-- END FLEX COL 01 --> 
          <!-- COL 01 CONTAINER /////////////////////////////////////////////////////////////////////// COL 01 CONTAINER-->

https://jsfiddle.net/patricktrefry/j58hx3v9/29/