How to keep controllers around for next page and?

Hey guys,

I need help here. I am building multistep form and I need to keep controller target values for the next page for receipt, which stays on all pages, how can I do that? I attached the visual. I have orders controller and receipt controller. When I click continue, orders controller disconnects and values are gone. I am adding values to receipt with create element from orders controller.

Thanks, hope I could explain it.

Could you please share some code? Are you handling the submit event or your form?

I am using rails,

The issue I have is, I can’t persist receipt data when I click continue to next page and this applies to the data that are added by this method below when I increment or decrement.

	communicateToReceipt() {            
    // if we have the product deal with it.

	let productLineName = document.getElementById("service-name-"
	let productLinePrice = document.getElementById("price-or-amount-"
	let bikeOrExtra = ( == 'basket' || == 'child-seat' ? "" : " bike")

    if (productLineName !== null) {

    	// set name of product
    	productLineName.innerText = this.outputTarget.value + " - " + + bikeOrExtra
    	// set price of product
    	productLinePrice.innerText = this.subtotalTarget.innerText
    	// remove product line if qty is less than zero
    	if (this.outputTarget.value == 0) {
        	let tobe_removed_less_than_zero = document.getElementById("service-name-""-created-by-js")
    // this.receiptController.productTarget.innerHTML ='content')	
    // if we do not have the product, make one.
        let li = document.createElement('li')
        let span1 = document.createElement('span')
        let span2 = document.createElement('span')

        li.className = 'list-group-item';
        li.setAttribute("id", "service-name-" + + "-created-by-js")
		// li.setAttribute("data-target", 'receipt.product')

        span1.setAttribute("id", "service-name-"
        span2.setAttribute("id", "price-or-amount-"
        span1.className = 'leftie';
        span2.className = 'righty';

        span1.innerText = this.outputTarget.value + " - " + + bikeOrExtra
        span2.innerText = this.subtotalTarget.innerText


    	document.getElementById('receipt-ul-js').appendChild(li)'content', document.getElementById('receipt-ul-js').cloneNode(true).innerHTML)
		this.receiptController.productTarget.innerHTML ='content')

    		// receipt related
		this.receiptController.totalTarget.innerText = parseInt("subtotal")).toFixed(2)
		this.receiptController.taxTarget.innerText = parseInt(("subtotal")*8.875)/100).toFixed(2)
		this.receiptController.gtotalTarget.innerText = (parseInt(this.receiptController.totalTarget.innerText) + parseInt(this.receiptController.taxTarget.innerText)).toFixed(2)


this is what I am trying to persist:'content', document.getElementById('receipt-ul-js').cloneNode(true).innerHTML)

this.productTarget.innerHTML ='content')

I have orders, receipt, and some other controllers and they communicate.
In receipt controller I initialize the the content of the receipt in productTarget. Not sure if this code enough.


	this.productTarget.innerHTML ='content')
	this.durationTarget.innerText = this.eventController.selectedDuration()
	this.totalTarget.innerText = parseInt("subtotal")).toFixed(2)
	this.taxTarget.innerText = parseInt(("subtotal")*8.875)/100).toFixed(2)
	this.gtotalTarget.innerText = (parseInt(this.totalTarget.innerText) + parseInt(this.taxTarget.innerText)).toFixed(2)


This might not be the best solution, but I solved this with localStorage. thanks for the help. Let me know if you have suggestions on better solving it with stimulus.