Manipulate each element separately

Question

I would like to achieve this: each generated close button will close the containing div not other.

Also each input with class first will inject the value in the corresponding input.

The below script is doing it all together how could I do it for each.

jsfiddle

$('body').find(':input').addClass('input-target');
$(".input-target").each(function() {
  $(this).on('focus', function() {
    $(this).after(' <div class="keyboard" style=""><input type="text" class="first"><button class="close-keyboard">X</button></div>');
  })
});

$(document).ready(function() {
  $(document).on('keyup', '.first', function() {
    $(".first").each(function() {
      $('.input-target').val($(".first").val());
    });
  });
});


$(document).bind('click', function(e) {
  var target = $(e.target);
  if (target.is('.keyboard')) {
    e.preventDefault(); // if you want to cancel the event flow
    // do something
    //  alert('clicked on keyboard class');
  } else if (target.is('.close-keyboard')) {
    e.preventDefault();
    // do something else
    // alert('clicked on close-keyboard class');
    $('.keyboard', this).hide();
  }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.input-target {
  position: relative !important;
  background: #efefef;
}

.keyboard {
  background: grey;
  color: #fff;
  display: block;
  position: absolute;
  z-index: 99999999;
}

#container {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <p>Div on the fly</p>
  <p>
    <input>
  </p>
  <p>
    <textarea rows="4"></textarea>
  </p>
</div>