JSFiddle - React, Tailwind, and code Playground
by halirgb
HTML
<ul>
<li>Node 1 <input class="discount" type="text" />
<ul>
<li>Node2 <input class="discount" type="text" />
<ul>
<li>Node3 <input class="discount" type="text" />
<ul>
<li>Nodes <input class="discount" value="lol" type="text" /></li>
<li>Nodes <input class="discount" type="text" /></li>
<li>Nodes <input class="discount" type="text" /></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>Node 1 <input class="discount" type="text" />
<ul>
<li>Node2 <input class="discount" type="text" />
<ul>
<li>Node3 <input class="discount" type="text" />
<ul>
<li>Nodes <input class="discount" type="text" /></li>
<li>Nodes <input class="discount" type="text" /></li>
<li>Nodes <input class="discount" type="text" /></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>Node 1 <input class="discount" type="text" />
<ul>
<li>Node2 <input class="discount" type="text" />
<ul>
<li>Node3 <input class="discount" type="text" />
<ul>
<li>Nodes <input class="discount" type="text" /></li>
<li>Nodes <input class="discount" type="text" /></li>
<li>Nodes <input class="discount" type="text" /></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
JavaScript
//only numbers
$(".discount").keypress(function(event) {
return /\d/.test(String.fromCharCode(event.keyCode));
});
// maxlenght
$('.discount').filter(function(){
$(this).attr('maxlength', 2);
if($(this).val() == ''){
$(this).addClass('val-empty');
}
});
$('.discount').keyup(function(){
$(this).nextAll().find('.discount.val-empty').val($(this).val());
});
//where input value empty