Jquery - Cloning a div which includes input unordered lists. How to get the dropdown to work in the cloned row?

Question

I was using the answer to this question -> Create a custom select box dropdown using jQuery to create select box dropdowns.

I am wanting to clone a row and reuse the dropdowns that are included in it. I have got it to clone the row, but the dropdowns in the cloned version doesn't work. The clicks do not register.

I have also added a class 'hide' to the 2nd dropdown in row 1. I only want to show the 2nd dropdown if the first option is selected, so I remove the class if the 1st option is selected in dropdown 1. This is why I cloned the row outside the function, as when the row is cloned, i want the 2nd dropdown to remain hidden and have the 'hide' class.

How can I clone the row (row1) and have the dropdown work in the cloned row?

https://jsfiddle.net/pfhnr9uk/4/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rows">
<div class="row1">
  <div class="cselect options1">
    <input type="text" disabled placeholder="Select n1">
    <ul class="optionlist">
      <li class="option option1">Business</li>
      <li class="option option2">Hair</li>
    </ul>
  </div>
<div class="cselect options2 hide">
    <input type="text" disabled placeholder="new test">
    <ul class="optionlist">
      <li class="option option1">test</li>
      <li class="option option2">option 2</li>
    </ul>
  </div>
</div>
<div class="row2">

  <div class="cselect options3">
    <input type="text" disabled placeholder="Select n2">
    <ul class="optionlist">
      <li class="option">Something</li>
      <li class="option">Else</li>
    </ul>
  </div>
</div>
<div class="clonerow">
click me
</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

/* ugly reset */

.cselect {
  position: relative;
}

.cselect input {
  background: #fff;
}

.cselect ul {
  display: none;
  position: absolute;
  z-index: 999;
  left: 0;
  top: 1.2rem;
  margin: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #d6d6d6;
}

.cselect li {
  padding: 10px 5%;
  list-style: none;
}

.cselect li:hover {
  background: rgba(41, 128, 185, 0.2);
}

.hide{
  display:none;
}

JS

$(function() { // DOM ready


  $(".cselect").each(function() {

    var $input = $(this).find("input");
    var $dropDown = $(this).find("ul");

    $(this).on("click", function() {
      $dropDown.stop().slideToggle();
    });

    $dropDown.on("click", "li", function() {
      $input.val($(this).text());
    });

  });

});

var newnewid = 0;
var $cloneplayerclause = jQuery(".row1").clone(true);

function clonerow(){
  
  newnewid++;
  var $sectionClone = $cloneplayerclause.attr("id", newnewid).clone(true);
  $('.rows').append($sectionClone);
  
  
}

function unhideoption2(){
 $(".option").removeClass('selected');
 $(this).addClass('selected');
 if($('.option1').hasClass('selected')){
 $('.options2').removeClass('hide');
 }
 }

$(".option").on("click", unhideoption2);
$(".clonerow").on("click", clonerow);

** EDIT ** The question was closed as it is linked to event delegation -> Event binding on dynamically created elements?

I use the .on for my click event

$(".option").on("click", unhideoption2);

but with each parent/static selector i add in, it still doesn't register any clicks on the cloned versions

e.g

$(".optionlist").on("click", ".option", unhideoption2);

or

$(".cselect").on("click", ".option", unhideoption2);

or

$(".row1").on("click", ".option", unhideoption2);

Where am i going wrong with the event delegation?