JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
  <div class="data">
    <input type="text" class="description" value="description1">
    <input type="text" class="food" value="food1">
  </div>
  <div class="data">
    <input type="text" class="description" value="description2">
    <input type="text" class="food" value="food2">
  </div>
  <div class="data">
    <input type="text" class="description" value="description3">
    <input type="text" class="food" value="food3">
  </div>
</div>

JavaScript

var jsonObj = [];
 $("#test").find('.data').each(function() {

    var description = $(this).find('.description').val();
    var food = $(this).find('.food').val();

    var item = {}
    item ["description"] = description;
    item ["food"] = food;

    jsonObj.push(item);
});
$("<pre>").text("Result: " + JSON.stringify(jsonObj, null, 2)).appendTo(document.body);