添加新行不会创建带有新字符计数器消息的新跨度

Question

每个描述字段都要显示字符数。在每一个新行之后，新的描述字段应该有自己的字符计数器。但是，如何设置不同的SpanID并在各自的SpanId 中显示

<div class="row">
<div class="col-sm-5" style="padding-right: 7px;padding-left: 26px;padding-bottom: 20px;">
<span style="padding-bottom: 20px;">Description</span>
<div class = "row" style="padding-bottom:10px;"> </div>
<div style="display: inline-flex;width: 150%;">
<input type="text" class="form-control controlheight claimdesc" onkeyup="ReasonCodeDescCounter(this.id)" id="txt_complaint_breakdowndesc" maxlength="85">
<span style="padding-left: 5%;line-height: 25px;" class="mandatoryinput"></span>            
</div>
<div class="validationError">
<span id="breakdowndescvalid" class="important">Mandatory</span>
<span id="reasoncodecharactersLeft" class="important"></span>
</div>

$(".newadd").append("<div class="additionalrow" id="additionalrow"+txti+""><div class='col-sm-5 col-xs-5' style='margin-top:10px;'><div style="padding-left: 5%;display: inline-flex;width: 150%;"><input type='text' class='form-control controlheight claimdesc' maxlength='85' id='txt_complaint_breakdowndesc" + txti + "' onkeyup='javascript:return ReasonCodeDescCounter(this.id)'><span style="padding-left: 3%;line-height: 25px;" class="mandatoryinput"></span></div><div class="validationError"><span id="breakdowndesc"+ txti +"valid" class="important">Mandatory</span><span style="display: block;" id='reasoncodecharactersLeft"+ txti + "' class="important" ></span></div></div>

function ReasonCodeDescCounter(id){
var x = document.getElementById(id).value;
var lastreasoncodedesccharactersLeft;
lastreasoncodedesccharactersLeft=0;
var lengthCount = x.length;              
var lengthdata = x;     
var reasoncodecharactersLeft;
if (lengthCount > 85) {
id.value = id.value.substring(0, lengthdata-1);
reasoncodecharactersLeft = lastreasoncodedesccharactersLeft;                   
}
else {                   
reasoncodecharactersLeft = 85 - lengthCount;   
lastreasoncodedesccharactersLeft=   reasoncodecharactersLeft;
}

$("#reasoncodecharactersLeft").css('display', 'block');
$("#reasoncodecharactersLeft").text(reasoncodecharactersLeft + ' Characters left');          
}
```[Missing Span after new description field in new row][1]

[1]: https://i.stack.imgur.com/UZ9S6.png

Answer 1

您可以在函数中传递this，其中this指的是发生keyup事件的输入框，然后使用它可以获得输入值，然后在跨度中显示所需的消息。

演示代码 :

var txti = 2;
//added left class
$(".newadd").append("<div class="additionalrow" id="additionalrow" + txti + ""><div class='col-sm-5 col-xs-5' style='margin-top:10px;'><div style="padding-left: 5%;display: inline-flex;width: 150%;"><input type='text' class='form-control controlheight claimdesc' maxlength='85' id='txt_complaint_breakdowndesc" + txti + "' onkeyup='javascript:return ReasonCodeDescCounter(this)'><span style="padding-left: 3%;line-height: 25px;" class="mandatoryinput"></span></div><div class="validationError"><span id="breakdowndesc" + txti + "valid" class="important">Mandatory</span><span style="display: block;" id='reasoncodecharactersLeft" + txti + "' class="important left" ></span></div></div>")

function ReasonCodeDescCounter(el) {
var x = $(el).val() //value of input
var lastreasoncodedesccharactersLeft;
lastreasoncodedesccharactersLeft = 0;
var lengthCount = x.length;
var lengthdata = x;
var reasoncodecharactersLeft;
if (lengthCount > 85) {
$(el).val(x.substring(0, lengthdata - 1));
reasoncodecharactersLeft = lastreasoncodedesccharactersLeft;
} else {
reasoncodecharactersLeft = 85 - lengthCount;
lastreasoncodedesccharactersLeft = reasoncodecharactersLeft;
}
//get span tag
$(el).closest(".col-sm-5").find(".left").css('display', 'block');
$(el).closest(".col-sm-5").find(".left").text(reasoncodecharactersLeft + ' Characters left');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-5" style="padding-right: 7px;padding-left: 26px;padding-bottom: 20px;">
<span style="padding-bottom: 20px;">Description</span>
<div class="row" style="padding-bottom:10px;"> </div>
<div style="display: inline-flex;width: 150%;">
<!--pass `this` as well-->
<input type="text" class="form-control controlheight claimdesc" onkeyup="ReasonCodeDescCounter(this)" id="txt_complaint_breakdowndesc" maxlength="85">
<span style="padding-left: 5%;line-height: 25px;" class="mandatoryinput"></span>
</div>
<div class="validationError">
<span id="breakdowndescvalid" class="important">Mandatory</span>
<!--added left classs-->
<span id="reasoncodecharactersLeft" class="important left"></span>
</div>
</div>
<div class="newadd"></div>