How to create the form for multi add for product with different variants

we can create Multi-add form for product with different variants when the customer can add to the cart multiple variations of an item with a single click of the add-to-cart button

_.extend(ProductDetailsFullView.prototype, {
				childViews: _.extend(ProductDetailsFullView.prototype.childViews, {
					'matrixChild.View': function () {
						return new matrixChildView({
							container: container,
							model: this.model,
							application: this.options.application
					});
				},
			})

View file

events: {
				'click [data-action="matrix-add-to-cart"]': 'matrixAddToCart'
			},
			matrixAddToCart: function () {
				let matrixItemTds = $('.matrix-child-quantity');
				var cart = this.container.getComponent("Cart");
				_.each(matrixItemTds, function (item) {
					let itemQuantity = $('.matrix-child-quantity#' + item.id)[0].value;
					if (itemQuantity > 0) {
						cart.addLine({
							line: {
								quantity: parseInt(itemQuantity),
								item: { internalid: parseInt(item.id) }
							}
						})
					}
					Backbone.history.navigate('cart', { trigger: true });
				})
			}
			//@method getContext @return JobinAndJismiITServices.multiAdd.matrixChild.View.Context
			, getContext: function getContext() {
				//@class JobinAndJismiITServices.multiAdd.matrixChild.View.Context
				try {
					var matrixChilds = this.model.get('item').attributes.matrixchilditems_detail;
					setTimeout(() => {
						$('.matrix-child-quantity').val(0);
					}, 200);
					return {
						matrixChilds: matrixChilds,
					}
				} catch (error) {
					console.log(error);
				}
			}
		});

in scss

//added changes for multi variant 
#matrix-child-addtoCart-continer {
	padding: 20px 0px 30px;
}
.matrix-child-addtoCart{
	width: 25%;
	background-color: rgb(15, 199, 15);
	border-color: transparent;
}
.matrix-child-addtoCart:hover,
.matrix-child-addtoCart:focus{
	background-color: rgb(15, 199, 15);
	border-color: #0fcf0f;
}
.product-details-full
i.header-mini-cart-menu-cart-icon {
    color: #ffffff;
    position: relative;
    right: 23%;
}
.matrix-table
table, td{
	border: 1px solid black;
	padding-top: 10px;
	padding-bottom: 0px;
}
.matrix-table
th{
	border: 1px solid black;
	padding-top: 15px;
	padding-bottom: 15px;
}
@media (min-width:$screen-sm) and (max-width:$screen-md){
  .matrix-child-addtoCart {
    width: 30%;
  }
  .product-details-full
  i.header-mini-cart-menu-cart-icon {
    right: 27%;
    padding-top: 25px;
  }
}
@media (min-width:$screen-xs) and (max-width:$screen-sm){
  .matrix-child-addtoCart {
    width: 50%;
  }
  .product-details-full
  i.header-mini-cart-menu-cart-icon {
    right: 45%;
    padding-top: 20px;
  }
}
@media (max-width: $screen-xs){
	.matrix-child-addtoCart {
		width: 64%;
		font-size: 14px;
	}
  .product-details-full
  i.header-mini-cart-menu-cart-icon {
    right: 61%;
    padding-top: 20px;
  }
  #matrix-child-addtoCart-continer {
    padding: 20px 24px 30px;
  }
}
 

In tpl

<!-- added to display the form for Multi-add form for product with different variants -->
<div id="matrix-child-addtoCart-continer" class="">
	<table class="matrix-table">
		<thead>
			<tr>
				<th>Item</th>
				<th>Price</th>
				<th>Quantity</th>
			</tr>
		</thead>
		<tbody>
			{{#each matrixChilds}}
			<tr>
				<td>
					{{#if custitem31}} {{custitem31}} {{/if}}
					{{#if custitem30}} , {{custitem30}} {{/if}}
				</td>
				<td>{{onlinecustomerprice_detail.onlinecustomerprice_formatted}}</td>
				<td><input class="matrix-child-quantity" type="number" name="quantity" id="{{internalid}}" min="0" value="0"></td>
			</tr>
			{{/each}}
		</tbody>
	</table>
	<button type="submit" data-action="matrix-add-to-cart" class="cart-add-to-cart-button-button matrix-child-addtoCart">
		Add to Cart
	</button>
  	<i class="header-mini-cart-menu-cart-icon"></i>
</div>

In the theme of respective where it should be displayed

<div data-view=”matrixChild.View”></div>