I want to return the value of each input its closest div. Each div has the different name but same div class next to it. The problem is I cannot find the closest div class with jquery. But the value from typing keyup sent succesfully.
$('.bk_name').on('keyup', function() {
var q = $(this).val();
$(this).parent().closest('div.resp').html(q);
console.log(q);
}); //keyup<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-5">
<label>Name1</label>
<input type="text" class="bk_name" name="bk_name[1]" />
<div class="resp"></div>
</div>
<br />
<div class="col-sm-5">
<label>Name2</label>
<input type="text" class="bk_name" name="bk_name[2]" />
<div class="resp"></div>
</div>For the fiddle here : https://jsfiddle.net/s85n42eo/1/
>Solution :
You can use $(this).next('div.resp').html(q) or $(this).parent().find('div.resp').html(q)
The problem is that you are using .closest() it will search for parents, not look for children.
Demo
$('.bk_name').on('keyup', function() {
var q = $(this).val();
console.log($(this).parent().find('')
$(this).next('div.resp').html(q);
console.log(q);
}); //keyup<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-5">
<label>Name1</label>
<input type="text" class="bk_name" name="bk_name[1]" />
<div class="resp"></div>
</div>
<br />
<div class="col-sm-5">
<label>Name2</label>
<input type="text" class="bk_name" name="bk_name[2]" />
<div class="resp"></div>
</div>