jQueryのmodaal.jsで紐付けができない


aタグを使わずにbuttonでやると紐付けができないのですが、どなたかご教示いただけると嬉しいです。

[code]

    <button class="js-modal" data-group="gallery"　data-modaal-content-source="#content01">表示</button>
    <button class="js-modal" data-group="gallery"　data-modaal-content-source="#content02">表示</button>
    <button class="js-modal" data-group="gallery"　data-modaal-content-source="#content03">表示</button>
    
    <div id="js-modal" style="display:none;">
        <ul>
          <li id="content01">コンテンツ</li>
    　　　　　　　　　　　　<li id="content02">コンテンツ</li>
    　　　　　　　　　　　　<li id="content03">コンテンツ</li>
        </ul>
    </div>
    
    <script>
    $('.js-modal').modaal();
    </script>
    
[/code]

現状、なぜか全てひとまとめに全部li要素が出てしまいます。  
content01が出てればcontent02,content03は出ない様にしたいです。  
それぞれのボタンタグからはcontentで結びつけた物が出る様にしたい。

色々探してみたもののこれと言ってよくわからなかったです・・・

