Focus not working for input fields Jquery

Question

I am trying to add input fields dynamically using jquery.I am able to add the input fields but not able to move the focus to next input field.

Code is as follows:-

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;

  $(scntDiv).keypress( function(event) {
    if (event.which==13){
      $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
      i++;
      return false;
    }

  });

  $('#remScnt').live('click', function() { 
    if( i > 2 ) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});

* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }

input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
  <p>
    <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
  </p>
</div>

Answer 1

1. id need to be unique per element, so change id='p_scnt' to class='p_scnt' for your input boxes.As well as use class="remScnt" instead of id="remScnt" for remove buttons too

2. Use $('.p_scnt:last').focus(); to add focus on dynamically created input-box

3 As you mentioned in a comment that you used jQuery latest version and hence .live() is not working, now you need to use jQuery event delegation

Working snippet:-

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').length;

  $(scntDiv).keypress( function(event) {
    if (event.which==13){
    alert($(event.target).val());
      $('<p><label for="p_scnts"><input type="text" class="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
      $('.p_scnt:last').focus();
      i++;
      return false;
    }
  });

  $(document).on('click','.remScnt',function() { 
    if( i > 1 ) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});

* { 
  font-family:Arial; 
}
h2 { 
  padding:0 0 5px 5px; 
}
h2 a { 
  color: #224f99; 
}
a { 
  color:#999; 
  text-decoration: none; 
}
a:hover { 
  color:#802727; 
}
p { 
  padding:0 0 5px 0; 
}

input { 
  padding:5px; 
  border:1px solid #999; 
  border-radius:4px; 
  -moz-border-radius:4px; 
  -web-kit-border-radius:4px; 
  -khtml-border-radius:4px; 
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" class="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

Note:- to alert() values do alert($(event.target).val()); inside if (event.which==13){ condition.