Adding li to ul causes all li to end up outside the ul

Question

I have a page that has the following uls on it:

   <div id="team1" class="team_name">Desperate Housewives                        
       <ul class="sortable ui-sortable" id="sortable_1" dataid-team="1" dataid-drag="drag_team_1" data-seasonid="7">
            <li id="team1_bowler53" class="team_bowler drag_team_1 ui-sortable-handle">Celia B Flint </li>
            <li id="team1_bowler54" class="team_bowler drag_team_1 ui-sortable-handle">Gale E McDonald </li>
            <li id="team1_bowler55" class="team_bowler drag_team_1 ui-sortable-handle">Gerri  Orff </li>
       </ul>
    </div>

This loads fine on start. Note that the ids are dynamically generated.

So, now I want to add an <li> to the div:

(note that selected is the team number, so it works out to team1 as above). The insert_code, below, displays as proper html in console.log.

insert_code in console.log appears as:

<li id="team1_bowler51" class="team_bowler sub drag_team1 ui-sortable-handle">Cara M Wilkins</li>

var insert_code = '<li id="'+new_li+'" class="'+classname+' '+drag_team+' ui-sortable-handle">'+bowler_name+'</li>';
jQuery("#team"+selected+" ul").append(insert_code);

I have also tried:

jQuery("#sortable_"+selected).append(insert_code);

Each time that I do this, I get the following HTML in Google DevTools:

<ul class="sortable ui-sortable" id="sortable_1" dataid-team="1" dataid-drag="drag_team_1" data-seasonid="7"></ul>
<li id="team1_bowler51" class="team_bowler sub drag_team1 ui-sortable-handle">Cara M Wilkins</li>
<li id="team1_bowler53" class="team_bowler drag_team_1 ui-sortable-handle">Celia B Flint </li>
<li id="team1_bowler54" class="team_bowler drag_team_1 ui-sortable-handle">Gale E McDonald </li>
<li id="team1_bowler55" class="team_bowler drag_team_1 ui-sortable-handle">Gerri  Orff </li>

Note that it has moved ALL of the li outside the ul.

From the page, it is obvious that it is not appending properly as the new li displays at the top of the ul instead of the bottom. Note that Cara Wilkins was the added li.

Any help would be appreciated...

The full code has a list of all bowlers on the left side with drop down boxes with team names. This fires in a change function:

jQuery(".team_select").on("change", function() {
    var id = jQuery(this).attr('id');
    var bowlerID = id.replace("bowler_team","");
    var original = jQuery(this).attr("data-original-value");
    var selected = jQuery(this).find('option:selected').attr("value");
    var old_li = "team"+original+"_bowler"+bowlerID;
    var new_li = "team"+selected+"_bowler"+bowlerID;
    var recID_field = "bowler"+bowlerID+"_RecID";
    var seasonID = jQuery("#seasonID").val();
    var starter = jQuery("#starter"+bowlerID).is(":checked");
    var captain = jQuery("#captain"+bowlerID).is(":checked");
    var book_avg = jQuery("#book_avg"+bowlerID).val();
    var book_avg_gms = jQuery("#book_avg_gms"+bowlerID).val();
    jQuery("#"+old_li).remove();
    var classname = "team_bowler";
    if(captain) {
        classname = classname+" captain";
    }
    if(!starter) {
        classname = classname+" sub";
    }
    var drag_team = "drag_team"+selected;
    var bowler_name = jQuery("#bowler"+bowlerID).attr("data-name");
    bowler_name = bowler_name.trim();
console.log("UL has "+jQuery("#team1 ul li").length+" elements.\r\n");
    var insert_code = '<li id="'+new_li+'" class="'+classname+' '+drag_team+' ui-sortable-handle">'+bowler_name+'</li>';
    jQuery("#team"+selected+" ul").append(insert_code);
console.log("Insert Code:"+insert_code+"\r\n");
console.log("li position:"+jQuery("#"+new_li).index()+"\r\n");      
});

There is a list of the teams on the right. Each team has a div with team name and a

that shows each member. That list is then sortable (but dragging and dropping). You can only sort in the same (which all works).