JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="ingredients">
   	  <ul class="list">
        	<li>
            	<input type="text"/>
                <i> <img class="remove" src="https://dl.dropboxusercontent.com/u/8011739/jQuery%20app/goedfout-02.svg"> </i>
            </li>
      </ul>   
            <p> Hit tab to create a new line. </p>
</div>
    </body>

CSS

.list {
	list-style: none;
}

ul li {
	border: 1px solid black;
	margin: 5px;
	
}

li i {
	float: right;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}

.remove {
	height: 20px;
	width: 20px;	
}

JavaScript

$(document).ready(function() {
	var $listOfIngredients = $('#ingredients ul li input');
	$listOfIngredients.focus(function(){
		$(document).keydown(function(key){
			if(key.which === 9) {
				$('.list').append('<li><input type="text"/><i> <img class="remove" src="https://dl.dropboxusercontent.com/u/8011739/jQuery%20app/goedfout-02.svg"> </i></li>');
			}
		});	
	});
	
	$('.list').sortable();
	
	
	
	
	$('.list').on("click", ".remove", function(e){
       e.preventDefault();
       alert('hello');
    });
    
    });