If I type something in the input field, it should add a border to the li tag containing the text. The current script works fine, but is there a way to make this jQuery script shorter?
Thank you for your help!
.add_border{
border: 2px solid #000 !important;
}
$(document).ready(function(){
$('#input1').on('keyup keydown keypress change paste', function() {
if ($(this).val() == '') { $('#my_block1').removeClass('add_border'); } else {$('#my_block1').addClass('add_border'); }});
$('#input2').on('keyup keydown keypress change paste', function() {
if ($(this).val() == '') { $('#my_block2').removeClass('add_border'); } else {$('#my_block2').addClass('add_border'); }});
});
<ul>
<li id="my_block1">
<span>some text 1</span>
<div class="form-group">
<input id="input1" type="text" name="my_item_1">
</div>
</li>
<li id="my_block2">
<span>some text 2</span>
<div class="form-group">
<input id="input2" type="text" name="my_item_2">
</div>
</li>
</ul>