JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery.min.js"></script>
<ul>
  <li> file 1</li>
  <li>
    <div class="add-file">+</div>
</ul>hi

CSS

li {
  list-style-type: none
}

.add-file {
  cursor: pointer
}

JavaScript

$('.add-file').click(function(e) {
  e.preventDefault();
  $('.add-file').html('<form action=""><input type="text" name="filename"><input type="submit" style="display:none"></form>');
  $('.add-file').removeClass('add-file');
  
  // Handle the dyn dynamic DOM addition of text input
  $(document).on('keyup', 'input[name="filename"]', function(e) {
  	e.stopImmediatePropagation();
    if (e.which === 13) {
      alert(this.value);
      // Now you can submit the form...
    }
  })
})