Appended jquery li with input element does not post in laravel

I'm working in a laravel project and currently I'm trying to post a dynamic drop down which is created by an ajax get request. This is the process.

User selects a drop down menu which in turn populates other drop down menus via jquery append. Here it would populate a drop down for quantity.

  $.each(result.productQuanties, function(i, item) {
  $("ul[data-dependent='quantity']").append(
    "<li value=" + item.quantity_name + " data-cost=" + item.price + "><span>" + item.quantity_name + "</span><input type='hidden' name='fruits' value='Apple'/></li>");
  })

the DOM is then appended with an li. Here is one:

<li value="50" data-cost="99.00"><span>50</span><input type="hidden" name="fruits" value="Apple"></li>

Since li and ul's aren't form elements I added this (just for testing purposes)

<input type="hidden" name="fruits" value="Apple">

This is then passed in a form via post.
A dd shows

  "_token" => "FdasdffdfSZc0PbpSfasdfauUOHFsriOIXaSy4"
  "product" => "Product"
  "job_name" => My job"

But does not show the input test.

When I manually input this:

<input type='hidden' name='fruits' value='Apple'/>

in any area of my blade file then the DD shows fruit and the value. The drop down is selectable and in the DOM I'm just lost as to what to do to get this to work. The expected functionality would be that the hidden input with value would be picked up from any place that I insert it with in the form tags. I've done countless research and I can't find any answers.

via Chebli Mohamed