jqueryの要素を分割する方法は？

Question

私はこの

<div class="size"> 
     <a class="cm active" data-id="cm">CM</a> /* ACTIVE */ 
     <a class="inch" data-id="inch">INCH</a> 
</div> 
<div class="button"> 
     <li data-head-cm="ABC" data-head-inch="DEF" 
      data-body-cm="GHI" data-body-inch="JKL" 
      class="active">      /* ACTIVE */ 
       BUTTON 1 
     </li> 
     <li data-foot-cm="MNO" data-foot-inch="PQR" 
      data-hair-cm="STU" data-hair-inch="VWX"> 
       BUTTON 2 
     </li> 
     <li data-head-cm="ABC" data-head-inch="DEF" 
      data-body-cm="GHI" data-body-inch="JKL" 
      data-hair-cm="STU" data-hair-inch="VWX"> 
       BUTTON 3 
     </li> 
</div> 
<ul class="diagram"> 
</ul> 

のようなコードをお持ちの場合は、体（毛/フィート/ボディ/ヘッド）の要素の一部の名前は、IDと値要素データになります（例：="ABC" ）私は、ボタンの1

/* if click BUTTON 1, diagram ul. Create element <li> */ 
<ul class="diagram"> 
     <li id="head">ABC</li> 
     <li id="body">GHI</li> 
</ul> 

/* if click BUTTON 2, diagram ul. Create element <li> */ 
<ul class="diagram"> 
     <li id="foot">MNO</li> 
     <li id="hair">STU</li> 
</ul> 

/* if click BUTTON 3, diagram ul. Create element <li> */ 
<ul class="diagram"> 
     <li id="head">ABC</li> 
     <li id="body">GHI</li> 
     <li id="hair">STU</li> 
</ul> 

そしてsizeに私をクリックしをクリックしたときはgoto <li>ABC</li>

コードが変更されます入力します。終了するデータ要素の値が-inchに置き換えられます。能動素子によっては

/* if click BUTTON 2 AND SIZE ACTIVED CLASS INCH, diagram ul. Create element <li> */ 
<ul class="diagram"> 
     <li id="foot">PQR</li> 
     <li id="hair">VWX</li> 
</ul> 

https://jsfiddle.net/rwvmacjs/4/のようにしか働かなかった。どのようにそのようになる？

Answer 1

更新フィドル：https://jsfiddle.net/rwvmacjs/8/

$(document).on('click', '.button li', function(e) { 
    $('.button li').removeClass("active"); 
    $(this).addClass("active"); 

    $("ul.diagram").html(''); 
    var sizeVal = $(".size a.active").data('id'); 

    var ulHtml = ""; 

    var dataAttrs = $(this).data(); 

    for(x in dataAttrs) { 
     var attrDetail = x.toLowerCase().split(sizeVal); 
     if(attrDetail.length > 1) { 
     ulHtml += '<li id="'+attrDetail[0]+'">'+dataAttrs[x]+'</li>'; 
     } 
    } 
    $("ul.diagram").html(ulHtml); 
});