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~