JSFiddle - React, Tailwind, and code Playground

HTML

<select class="form-control" required name="article">
        <option value="Coca Cola">Coca Cola</option>
    </select>
    <input class="form-control number-input" value="" name="qty" type="text">

    
    <select class="form-control" required name="article">
        <option value="Jupi">Jupi</option>
    </select>  
    <input class="form-control number-input" value="" name="qty" type="text">

      
    <select class="form-control" required name="article">
        <option value="Fanta">Fanta</option>
    </select>
    <input class="form-control number-input" value="" name="qty" type="text">
        
        <div><button>Update Json</button></div>
   <div id="output"></div>

JavaScript

$("button").click(function () {
    var invoiceNumber = 1;
    
    var articles = $('[name~=article]').map(function () {
        var qtyVal = $(this).next("[name=qty]").val();
        return { 
            invoice: invoiceNumber, 
            article: $(this).val(),
            qty: qtyVal
        };
    }).get();
    
    $("#output").text(JSON.stringify(articles));
});