This <span class='inserted-dropdown'>&amp;nbsp;</span> should look like.

<script type="text/javascript" charset="utf-8">  
  $(document).on('ready',function(){
    var thisSelect = $('#question{QID} select[id^="answer"]:eq(0)');
 
    // Move the dropdown
    $('#question{QID} .inserted-dropdown:eq(0)').append(thisSelect);
  });
</script>

This is what the <span class='inserted-dropdown'>&amp;nbsp;</span>  should look like this. It seems rather <span class='inserted-dropdown'>&amp;nbsp;</span> to create.

<script type="text/javascript" charset="utf-8">  
  $(document).on('ready',function(){
    var thisSelect = $('#question{QID} select[id^="answer"]:eq(0)');
    var secondSelect = $('#question{QID}').nextAll('[id^="question"]:eq(0)').find('select[id^="answer"]:eq(0)');
 
    // Move the first dropdown
    $('#question{QID} .inserted-dropdown:eq(0)').append(thisSelect);
    // Move the second dropdown
    $('#question{QID} .inserted-dropdown:eq(1)').append(secondSelect );
 
    // Hide the next question
    $('#question{QID}').nextAll('[id^="question"]:eq(0)').hide();
  });
</script>

<style type="text/css">
  #question{QID} select {
    display: inline-block;
    margin: 0 0 0 -0.25em;
    width: auto;
    height: auto;
    padding: 0;
  }
 
  #question{QID} .answer-container{
    display: none;
  }
</style>

// Hide the next question
    $('#question{QID}').nextAll('[id^="question"]:eq(0)').hide();