How do I select the previous class element

Question

html code

<tr>
 <td> 
   <input type='text' name='bbc[]'> <!-- array name input -->
   <ul class='popup'>
     <li> one </li>
     <li> two </li>
     <li> three</li> <!-- I want click copy value "three" and paste input -->
   </ul>
 </td>
</tr>
<tr>
 <td> 
   <input type='text' name='bbc[]'>
   <ul class='popup'>
     <li> one </li>
     <li> two </li>
     <li> three</li>
   </ul>
 </td>
</tr>

I want : click ul inside li copy text() or html() value and paste this outside input value.

$('body .popup').hide();
    $('body').on('keyup','.name',function(){
        $(this).next().slideDown();
        $('body .popup li').click(function(){
            $(this).prev().css({background:'red'})
        });
    });
})

$(window).click(function(){
        $('.popup').slideUp(200);
});
$('body').on('click','.popup',function(e){
  e.stopPropagation();
});

I could get value but 'input' do not print

jsfiddle

Answer 1

Input is the prev element of ul, not li. So you need to traverse to the current ul first.

To get the current parent ul, you can use $(this).closest("ul")

Then your final code will be,

$(function() {
  $('body .popup').hide();
  $('body').on('keyup', '.name', function() {
    $(this).next().slideDown();
    $('body .popup li').click(function() {
      $(this).closest("ul").prev().val($(this).text())
    });
  });
})

$(window).click(function() {
  $('.popup').slideUp(200);
});
$('body').on('click', '.popup', function(e) {
  e.stopPropagation();
})

Fiddle