Neu Variation in den Warenkorb legen von beliebiger Seite aus

[HannesD.]

Hallo liebes Forum,

ich versuche gerade auf einer beliebigen Seite einen Kindartikel in den Warenkorb zu legen, es wird aber immer der Vater in den Warenkorb gelegt. Das Formular sieht folgendermaßen aus:

<form class="form form-basket jtl-validate" target="_self" id="buy_form_21697" action="***URL***" method="POST" data-toggle="basket-add">
    <input type="hidden" class="jtl_token" name="jtl_token" value="***token***">
    demo
    <div class="row ">
        <div class="col col-xl-4 col-12" itemprop="offers" itemscope="" itemtype="https://schema.org/Offer">
            <div class="form-row ">
                <div class="col  col-12">
                    <div class="input-group form-counter" role="group" data-bulk="">
                        <div class="input-group-prepend ">
                            <button type="button" class="btn  btn-" aria-label="Menge verringern" data-count-down="">
                                <span class="fas fa-minus"></span>
                            </button>
                        </div>
                        <input type="number" class="form-control quantity" id="quantity21697" value="1" min="0" step="1"
                            name="anzahl" autocomplete="off" aria-label="Menge" data-decimals="0"
                            data-product-id="21698">
                        <div class="input-group-append ">
                            <button type="button" class="btn  btn-" aria-label="Menge erhöhen" data-count-up="">
                                <span class="fas fa-plus"></span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col  col-12">
                    <button type="submit" class="btn basket-details-add-to-cart btn-primary btn-block" id="submit21697"
                        title="In den Warenkorb" aria-label="In den Warenkorb">
                        In den Warenkorb
                    </button>
                </div>
            </div>
            <input type="hidden" class="form-control " value="21698" name="VariKindArtikel">
            <!-- <input type="hidden" id="vt1496" name="eigenschaftwert[438]" value="1496"> -->
            <!-- <input type="hidden" id="vt1499" name="eigenschaftwert[439]" value="1499"> -->
            <input type="radio" class="control-hidden" name="eigenschaftwert[438]" id="a-21697vt1496" value="1496" checked="" required="">
            <input type="radio" class="control-hidden" name="eigenschaftwert[439]" id="a-21697vt1499" value="1499" checked="" required="">
            <input type="hidden" name="inWarenkorb" value="1">
            <input type="hidden" class="form-control " value="21697" name="a">
            <input type="hidden" class="form-control " value="1" name="wke">
            <input type="hidden" class="form-control " value="1" name="overview">
            <input type="hidden" class="form-control " value="" name="Sortierung">
        </div>
    </div>
</form>

Der Vater ist hierbei 21697 und Kind 21698. Wie ihr seht, habe ich schon einiges über hidden fields und Eigenschaftswerte versucht, jedoch ohne Erfolg.

Was muss ich dem Formular mit geben, dass das Kind und nicht der Vater im Warenkorb landet?
Ist dies übehaupt die präferierte Methode, einen Artikel in den Warenkorb zu legen?
Gibt es vielleicht eine Function, die den Artikel einfacher in den Warenkorb legt anhand von kArtikel?

Besten Dank für eure Zeit