jquery之顯示多個文本框剩餘輸入字數

效果如圖：

jquery代碼：

 //商品屬性
         var $attribute=$(".attribute");
         var $count=$attribute.length;
             $attribute.keyup(function(){
                var index=0;   //這裏我不知道用什麼方法獲得當前對象的索引 就用了下面這種笨方法  【我試了 $(this).index($(".attribute"))  ，可是這樣獲取的不正確~~~~(>_<)~~~~ 】
               for(var i=0;i<$count;i++){
                       var $temp=$attribute.eq(i);
                       if($temp.attr("name")==$(this).attr("name")){
                           index=i;
                           break;
                       }
               }
               var $this = $(this);
               var currCount = getLength($this.val());
               checkAttributeLength(currCount,index);
               
                });
        
            $attribute.blur(function(){
                var index=0;
               for(var i=0;i<$count;i++){
                       var $temp=$attribute.eq(i);
                       if($temp.attr("name")==$(this).attr("name")){
                           index=i;
                           break;
                       }
               }
                var $this = $(this);
                var currCount = getLength($this.val());
                checkAttributeLength(currCount,index);
               });
        
        function checkAttributeLength(count,i){
            var $countTip=$(".countTipAttr");
            var $nameCount=$(".nameCountAttr");
            
            if(count <= 30){
                $countTip.eq(i).html("還可以輸入");
                $nameCount.eq(i).removeClass("cred").addClass("cgreen");
                $nameCount.eq(i).html(30 - count);
            }else{
                $countTip.eq(i).html("已超出");
                $nameCount.eq(i).removeClass("cgreen").addClass("cred");
                $nameCount.eq(i).html(count - 30);
            }
        }

<#if list.attributeType == "text">

<input style="float:left;" type="text" name="${list.id}" class="attribute" value="${(product.productAttributeMap.get(list)[0])!}" />  這裏是動態創建商品屬性文本框的【可能有多個】
<span class="text9" style="float:left;"> * </span>
 <span class="countTipAttr" style="float:left;">還可以輸入</span><span style="float:left;" class="nameCountAttr" class="cgreen">30</span>個字
 </#if>                   

我之前試過循環獲取input,然後添加keyup和blur事件，我是這樣寫的

//商品屬性
         var $attribute=$(".attribute");
         var $count=$attribute.length;
        
         for(var i=0;i<$count;i++){
             $attributetemp=$attribute.eq(i);//我感覺是這裏出錯，我本來想拼接名稱的【 $attributetemp0    $attributetemp1   $attributetemp2  （我是這樣拼接的： $("attributetemp"+i)     ）】，但是還是不行，不知道是不是拼接錯了
             $attributetemp.keyup(function(){
                var $this = $(this);
                var currCount = getLength($this.val());
                checkAttributeLength(currCount,i);
                });
        
            $attributetemp.blur(function(){
                var $this = $(this);
                var currCount = getLength($this.val());
                checkAttributeLength(currCount,i);
               });
         }

但是沒有成功，具體原因我也不清楚,看到的，知道的，麻煩給我說一下哈O(∩_∩)O~