How to get all list of data from all input?

Question

JavaScript

Hello! There was a need to connect a calorie calculator on the wife’s website, but then a snag arose, how now to get all the data from the filled inputs in one list. You need to output all the specified ingredients in a separate DIV block, so that each ingredient is separated by a comma.

There is a block where the ingredient is added, in block 3 input, in the 1st we enter the ingredient "tomato", in the 2nd we indicate the weight "2", and in the 3rd unit of measurement "pcs". It turns out as a result "Tomato 2 pcs."

Each new line with new input fields is formed in this way:

<div class="form-box-cont">
    <div class="form-box-ingrid">
        <input type="text" placeholder="Название ингредиента" id="ingred2" name="ingred_group[1][ingredient][2][name]" value="">
    </div>
    <div class="form-box-inp">
        <input type="text" placeholder="Кол-во" name="ingred_group[1][ingredient][2][value]" value="">
        <input type="text" placeholder="Ед.Изм." id="unit2" name="ingred_group[1][ingredient][2][unit]" value="">
    </div>
</div>

Accordingly, you need to pull out the ingredients in this format: Let's say we have 5 ingredients, we get the output in the new block "Tomato 2 pcs, Cucumber 1 pc, Flour 200 gr, Salt to taste, Peas 1 can". It is necessary that the entire list is displayed in one line.

How can I do this I can't figure it out? I'm slowly trying to learn JS, but it's still difficult.

The code for generating input fields:

I ask you for help.
Here is the code for generating lists for adding ingredients: