테이블에 반복적으로 반복 될 때 문자 카운터가 작동하지 않습니다.

Question

아래 테이블의 여러 텍스트 영역에서 자바 스크립트 문자 카운터를 사용하려고합니다. 문제는 내 테이블의 첫 번째 행에있는 카운터 전용 함수입니다. 텍스트 영역이있는 후속 행은 "250 자 남음"을 표시하지만 의도 한대로 작동하지 않습니다. 각 문자 카운터에 고유 한 ID를 할당하는 방법을 모르므로 모든 텍스트 영역에서 작동합니다. 어떤 도움을 주시면 감사하겠습니다.

PHP :

echo "</td><td>"; 
echo '<form action="peerflagreview.php?foorbar=' . $foobar . '" method="post" id="FlagPeerReview"> 
<A NAME="#peer' . $foobar . '"> (<a href="#peer' . $foobar . '" class="show_hide2">Report</a>) 
<textarea class="PeerFlag" value="" name="PeerFlag" id="PeerFlag2"></textarea> 
<input type="hidden" value="Post" name="submit" /> 
<span id="PeerFlag2Span">250 characters remaining</span> 
<input type="submit" value="Submit"></form>'; 
echo "</td></tr>"; 

JAVASCRIPT :

<script type="text/javascript"> 
$("#PeerFlag2").on('change keydown paste input', function(){ 
     updateCounter('#PeerFlag2'); 
}); 
function updateCounter(theTextAreaID) { 
    var remaining = 250 - jQuery(theTextAreaID).val().length; 
    jQuery(theTextAreaID + 'Span').text(remaining + ' characters remaining.'); 
} 

$('textarea').on('keydown', function(event) { 
    if (event.keyCode == 13) 
     if (!event.shiftKey) $('#PeerFlag').submit(); 
}); 

</script> 

Answer 1

이이이 텍스트 영역의 다음 스팬을 타겟으로보다 내가 다른 필요한 설명 정도의 보이지 않는 아주 간단한 데모입니다 용도. jQuery를 이미 사용하고 있으므로이 데모에서도 jQuery가 사용됩니다.

아래 덧글을 남길 나는 가능한 한 빨리 연락을 드릴 것입니다하시기 바랍니다 질문이있는 경우

$(document).ready(function(){ 
 
    $(".UserInput").on('input', function(){ 
 
     $(this).next("span").html(250 - this.value.length + " characters remaining"); 
 
    }).trigger('input'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="UserInput"></textarea><span>this is filled automatically</span><br/> 
 
<textarea class="UserInput"></textarea><span></span><br/> 
 
<textarea class="UserInput"></textarea><span></span><br/> 
 
<textarea class="UserInput"></textarea><span></span><br/>

.

이 도움이 되었기를 바랍니다. 해피 코딩!