Jquery listview refresh twice acting strangely with dynamic HTML

Alright so I've been messing around with this for 2 days and can't figure it out for the life of me. Basically I have dynamically generated <li> entries appending to a static <ul>, and then calling the .listview('refresh',true) function afterwards.

The first generation is fine, the second generation screws up the padding on the already listed elements, but shows the newly listed elements just fine.

I also have a "show more" button that retrieves these dynamically generated entries, and then updates itself to reflect a new offset. So here is the code.

HTML:

<div data-role="page" id="librarysearch" data-theme="a">
<div data-role="header" data-position="inline"></div>
<div data-role="content">
    <div>
        <a href="javascript:applib.libraryfinished();" data-role="button" data-inline="true" data-transition="fade" data-icon="arrow-l">Finished</a>
        <a href="javascript:applib.showlibraryplaylist();" data-role="button" data-inline="true" data-transition="fade">Playlist</a>
        <input id="librarysearchinput" size="60" onkeypress="if (event.keyCode == 13) applib.searchlibraryservers();" type="search" />
        <a href="javascript:applib.searchlibraryservers();" data-icon="search" data-inline="true" data-role=button>Search</a>
        <ul data-role="listview" id="libraryartistresults" name="libraryartistresults" data-theme="a"></ul>
        <div id="showmoreartists"></div>
    </div>
</div>
<div data-role="footer" data-position="inline">
</div>

Initial Generation of list elements:

this.searchlibraryservers = function(offset)
{
    window.$("#librarysearchinput").blur();
    var query = window.$("#librarysearchinput").val();
    if (query !== "")
    {
        if (sonicservers.length > 0)
        {
            if (!libraryisdynamic)
                libraryserverid = selectedsonicserverid;
            remoteapp.searchserver(libraryserverid, query + "*", {songCount: 51}, function(results)
            {
                var htmlout = "";
                var buttonhtml = "";
                if (results && results.success)
                {
                    var i;
                    librarysearchresults = results.response;
                    htmlout += "<li data-role=\"list-divider\">Artists</li>";
                    for (i in librarysearchresults.artists)
                        htmlout += "<li><a href='javascript:applib.libraryartist(" + librarysearchresults.artists[i].id + ");'>" + librarysearchresults.artists[i].name + "</a></li>";
                    if (countProperties(librarysearchresults.artists) > 1) // just set to 1 for testing
                        buttonhtml += "<a href=\"javascript:applib.showmoreartists('"+query+"', '20')\" type=\"button\">Show More</a>";
                    window.$("#libraryartistresults").append(htmlout);
                    window.$("#libraryartistresults").listview('refresh', true);
                    window.$("#showmoreartists").html(buttonhtml).trigger('create');
                }
            });
        }
    }
};

This generates the following html:

<li data-role=\"list-divider\">Artists</li>
<li><a href='javascript:applib.libraryartist(7);'>Christian Altenburger, violin, German Bach Soloists, Helmut Winschermann</a></li>
<li><a href='javascript:applib.libraryartist(14);'>Eckart Haupt, flute; Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(15);'>New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(16);'>Burchard Glaetzner, oboe; New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(81);'>John Elwes, David Thoma, Bach Collegium Japan and Masaaki Suzuki</a></li>
<li><a href='javascript:applib.libraryartist(125);'>1734 Bach</a></li>
<li><a href='javascript:applib.libraryartist(131);'>1731 Bach</a></li>

And for the button:

<a href=\"javascript:applib.showmoreartists('bach', '20')\" type=\"button\">Show More</a>

This all seems fine, and in fact shows up fine, but when I click show more it basically does the same thing as the initial result except taking the offset into account:

this.showmoreartists = function(query, offset)
{
    var htmlout = "";
    var buttonhtml = "";
    remoteapp.searchserver(selectedsonicserverid, query + "*", {artistOffset: offset}, function(results)
    {
        librarysearchresults = results.response;
        for (var i in librarysearchresults.artists)
            htmlout += "<li><a href='javascript:applib.libraryartist(" + librarysearchresults.artists[i].id + ");'>" + librarysearchresults.artists[i].name + "</a></li>";
        if (countProperties(librarysearchresults.artists) > 1) //just set to 1 for testing
        {
            buttonhtml += "<a href=\"javascript:applib.showmoreartists('"+query+"', '"+(Viewbiquity.math.tonumber(offset)+20)+"')\" type=\"button\">Show More</a>"; 
        }
        else
        {
            window.$("#showmorebutton").hide();
        }
        window.$("#showmoreartists").html(buttonhtml).trigger('create');
        window.$("#libraryartistresults").append(htmlout);
        window.$("#libraryartistresults").listview('refresh', true);
    });
};

The newly generated html that it appends to "libraryartistresults" seems fine, (the results are the same due to the testing setup, it should be a moot point for this problem though since the listview shouldn't care about it being the same.

<li><a href='javascript:applib.libraryartist(7);'>Christian Altenburger, violin, German Bach Soloists, Helmut Winschermann</a></li>
<li><a href='javascript:applib.libraryartist(14);'>Eckart Haupt, flute; Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(15);'>New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(16);'>Burchard Glaetzner, oboe; New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(81);'>John Elwes, David Thoma, Bach Collegium Japan and Masaaki Suzuki</a></li>
<li><a href='javascript:applib.libraryartist(125);'>1734 Bach</a></li>
<li><a href='javascript:applib.libraryartist(131);'>1731 Bach</a></li>

The button html looks fine too:

<a href=\"javascript:applib.showmoreartists('bach', '60')\" type=\"button\">Show More</a>

I've even tried using the "style="white-space:normal;" in the UL.

TL:DR here's the code I believe to have the most relevance

STATIC HTML:

<ul data-role="listview" id="libraryartistresults" name="libraryartistresults" data-theme="a"></ul>
<div id="showmoreartists"></div>

HTML UPDATE:

window.$("#showmoreartists").html(buttonhtml).trigger('create');
window.$("#libraryartistresults").append(htmlout);
window.$("#libraryartistresults").listview('refresh', true);

GENERATED HTML SAMPLE:

<li><a href='javascript:applib.libraryartist(125);'>1734 Bach</a></li>
<li><a href='javascript:applib.libraryartist(131);'>1731 Bach</a></li>

It's probably some simple oversight but at this point I'm stuck. I'll keep digging around, maybe the append is placing the <li> after the </ul>

And thanks for reading this if you did, it was a long post I know and I appreciate you taking the time to just get through it all.