Add multiple short forms inside main form through collapsed elements

Hi there!

My website allows users (winemakers) to register for a wine fair. Aside from general information, the winemakers are also asked to list the wines they are planning to bring to the fair, each with a detailed description of the wine’s name, grape(s), type, year, amount of sulphites and price. The image below shows the main overview when the “Wines” part of the registration form is loaded:


The “Start adding your wines” button expands a first collapsed “Wine data box”, as you can see below, in addition to another collapsed “Add wine” button which should expand an exact collapsed copy of the Wine data box again, and so on, to a total amount of six wine insertions.


I have close to no experience with coding, but I managed to produce the following - please don’t mind the numbering of the boxes and buttons, I have no idea how to reset those. I checked the ID tags for each button and box and tried first to have one button expand both a box (Wine Data) and a button (Add wine), but I can’t seem to arrive any further than the “Start adding your wines” button (button29). The next “Add Wine” button (button35) does not respond when clicked.

export function button29_click(event) {
$w( ‘#box3’ ).expand();
$w( ‘#button35’ ).expand();
}
export function button35_click(event) {
$w( ‘#box11’ ).expand();
$w( ‘#button36’ ).expand();
}

I assume there is a more dense coding for the above to reproduce these boxes and buttons (and a way to save the inserted data in a different, separate part of the registration insertion database?)

Can anyone help me out?

Many thanks in advance!
Jason

Is your CODE also connected with your Wix-property-panel ?

You can use this code instead…

$w.onReady(()=>{
	$w('#button29').onClick(()=>{
		$w('#box3').expand(), $w('#box3').show();  
		$w('#button35').expand(), $w('#button35').show();
	});

	$w('#button35').onClick(()=>{
		$w('#box11').expand(), $w('#box11').show();  
		$w('#button36').expand(), $w('#button36').show();
	});
});