Chained method calls doesn't work on original nor cloned element, why?

Question

I have the following HTML:

    
Make Select2

        

Answer 1

Updated fiddle.

I suggest to use a container then append the element you want to it, check the example below.

Hope this helps.

$(function() {
  var cond1 = $('#condition_value_1');
  var cloned_cond1 = cond1.clone();
  var cond1_select = '<select name="condition_value_1" id="condition_value_1" multiple="multiple"><option></option><option value="1">Opt1</option><option value="2">Opt2</option></select>';

  $('#showme').click(function() {
    $("#my-container").html(cond1_select);
    $("#condition_value_1").select2({placeholder: 'Select choice',width:'100%'});
  });

  $('#clickme').click(function() {
    if ($('#condition_value_1').hasClass('select2-hidden-accessible')) {
      $("#condition_value_1").select2('destroy');
    }
    $("#my-container").html(cloned_cond1);
    $("#condition_value_1").show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>

<div id="my-container">
  <input type="text" id="condition_value_1" name="condition_1" style="display: none" />
</div>

<button id="showme">Make Select2</button>
<button id="clickme">Make Input</button>

Answer 2

The problem is that replaceWith returns the removed element, not the new element. I suggest a different path:

$(function() {
  var cond1 = $('#condition_value_1');
  var cloned_cond1 = cond1.clone().removeAttr('style');
  var cond1_select = '<select name="condition_value_1" id="condition_value_1" multiple="multiple"><option></option><option value="1">Opt1</option><option value="2">Opt2</option></select>';

  $('#showme').click(function() {
    cond1.replaceWith(cond1_select);
    $("#condition_value_1").select2({
      placeholder: 'Select choice'
    });
    cond1 = $("#condition_value_1");
  });

  $('#clickme').click(function() {
    if ($('#condition_value_1').hasClass('select2-hidden-accessible')) {
      $("#condition_value_1").select2('destroy');
    }

    $('#condition_value_1').replaceWith(cloned_cond1);
    cond1 = $('#condition_value_1');
  });
});

Note that I've removed the attribute from the clone before ever replacing anything; that way, you don't have to worry about it.

Note also in the showme click handler, we replace the HTML, then get a new hook to $("#condition_value_1"). That's because cond1 is no longer in the DOM, since you've replaced it with the HTML in the first line.

Likewise, in the clickme click handler, you need to reset the value of cond1 to match your new HTML.