jQm change split icon in listview

HTML

<script src="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<div data-role="page" data-title="pagetitle" id="page1">
    <div data-role="header"><h1>pageheader</h1></div>
    <div data-role="content">
        <ul data-role="listview" data-autodividers="true" data-inset="false" data-filter="true" data-split-icon="check">
            <li>
                <a style="padding: 0;">
                    <div data-role="collapsible" data-inset="false" style="margin: -.7em 0 -.7em 0;">
                        <h2>Mark Twain
                            <p class="ui-li-inside">1865</p>
                        </h2>
                        <div>
                            <p>More info</p>
                        </div>
                    </div>
                </a>
                <a data-theme="c" class="checkButton" id="1"></a>
            </li>
            <li>
                <a style="padding: 0;">
                    <div data-role="collapsible" data-inset="false" style="margin: -.7em 0 -.7em 0;">
                        <h2>Louis Pasteur
                            <p class="ui-li-inside">1895</p>
                        </h2>
                        <div>
                            <p>More info</p>
                        </div>
                    </div>
                </a>
                <a data-theme="c" class="checkButton" id="1"></a>
            </li>
            <li>
                <a style="padding: 0;">
                    <div data-role="collapsible" data-inset="false" style="margin: -.7em 0 -.7em 0;">
                        <h2>Charles Dickens
                            <p class="ui-li-inside">1795</p>
                        </h2>
                        <div>
                            <p>More info</p>
                        </div>
                    </div>
                </a>
                <a data-theme="c" class="checkButton"...

CSS

.ui-li-inside {
  height: 1em;
  margin-left: 1em;
  display: inline-block;
}

JavaScript

$(document).delegate("#page1", "pageshow", function() {
  var checked = [];
  
  $('.checkButton').click(function() {
      if ($.inArray(this.id, checked) === -1) {
          checked.push(this.id);
          $(this).buttonMarkup({theme: 'b'});
          //$(this).html('<a data-theme="c" class="checkButton" id="' + this.id + '"></a>');$('#customers').trigger("pageshow");
          //$(this).attr("data-theme", "b").removeClass("ui--c").addClass("ui-btn-up-b");
      } else {
          checked.splice(checked.indexOf(this.id), 1);
          $(this).buttonMarkup({theme: 'c'});
      }
  });
});