Append an input field to the end of an li element. jQuery
<p>let's say I enter something into an input field, whatever is typed gets appended to a ul along with another input field.</p>

<p>I can't figure out a way to append the input field. I mean, what I tried added an input at the beginning of the li and adds it over and over again.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("#add").on("click", function() {

  var i = $("#task").val();
  var time = document.createElement("input");
  time.setAttribute("type", "text");
  $("#task").val("");
  $("ul").append("&lt;li&gt;&lt;span&gt;X&lt;/span&gt; " + i + " " + "&lt;/li&gt;");
  $("ul li").append(time);
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="input"&gt;
  &lt;input type="text" id="task" name="todo" placeholder="Your task"&gt;
  &lt;button id="add"&gt;Add It&lt;/button&gt;
 &lt;/div&gt;

 &lt;div id="after"&gt;&lt;/div&gt;
 
 &lt;ul&gt;
  &lt;li&gt;&lt;span&gt;X&lt;/span&gt; Code ToDo&lt;/li&gt;
  &lt;li&gt;&lt;span&gt;X&lt;/span&gt; Read two books&lt;/li&gt;
  &lt;li&gt;&lt;span&gt;X&lt;/span&gt; Run&lt;/li&gt;  
 &lt;/ul&gt;</code></pre>
</div>
</div>
</p>