I want sorting only first div text...?

When click on checkbox, i want ul > li > first div Should be Ascending.

The country div should not be ascending it should remaining as it is.

This code is working but not as per my requirement.

<input type="checkbox" name="checkbox-choice-t-61" class="ascsection" id="checkbox-choice-t-6a" value="" />

<ul id="Section">
  <li style="border-bottom:1px solid #ddd;">
  <span style="display:flex;">
    <div id="ui-id-2" tabindex="-1" class="abc sectionname">Section</div>
    <div id="syriacname-27" class="syriacSection qoloname">Us</div>
  </span>
</li>
<li style="border-bottom:1px solid #ddd;">
  <span style="display:flex;">
    <div id="ui-id-2" tabindex="-1" class="abc sectionname">Farade</div>
    <div id="syriacname-27" class="syriacSection qoloname">NewYork</div>
  </span>
</li>
</ul>

#Section .sectionname{
	float: left;
	margin-left: 10px;
	margin-top: 10px;
	text-align: left;
	width: 50%;
	padding-bottom: 7px;
}

#Section .qoloname{	
	float: right;
	margin-right: 10px;
	margin-top: 10px;
	text-align: right;
	width: 50%;
	padding-bottom: 7px;
}

Checkbox Click

$(".ascsection").click(function(){
  if($(this).is(":checked"))
  {  		
  		var items = $('#Section li').get();
        items.sort(function(a,b){
                var keyA = $(a).text();
                var keyB = $(b).text();

                if (keyA < keyB) return -1;
                if (keyA > keyB) return 1;
                return 0;
        });

        var ul = $('#Section');
            $.each(items, function(i, li){
               ul.append(li);
            });				
  }
});