Replace radio button with a clickable purchase / no purchase button

Just a quick note: I am also providing an image with each choice. 

Try adding the below JS to General → Header → Source
 

<script>   Qualtrics.SurveyEngine.addOnReady(function()
{

 let sneakyButtonContainers = document.querySelectorAll(".sneakyButtonContainer");
    sneakyButtonContainers.forEach((container, index) => {
        // Create a new button element
        let button = document.createElement("button");
        // Check if it's the last button
        if (index === sneakyButtonContainers.length - 1) {
            button.innerText = "No Purchase";
            button.style.backgroundColor = "#dc3545"; // Bootstrap danger red
        } else {
            button.innerText = "Purchase";
            button.style.backgroundColor = "#007bff"; // Bootstrap primary blue
        }
        // Apply common button styles
        button.style.padding = "8px 16px";
        button.style.color = "white";
        button.style.border = "none";
        button.style.borderRadius = "4px";
        button.style.cursor = "pointer";
        button.style.fontSize = "14px";
        // Replace the existing radio button with the new button
        container.innerHTML = ""; // Clear existing content
        container.appendChild(button);

    });

});</script>

I actually want it to be for specific questions and not for all. Also, this is still keeping the radio button and not showing me the purchase button. 

Nothing seems to work with a flat layout. I changed the layout to Classic. It removed the radio button without any code. 

But the code is not showing me the purchase/ no purchase button. 

​@OBh - Is this Qualtrics Guided Conjoint project or did you build your own Conjoint and this is just a regular multiple choice question?

This is a regular multiple choice and I changed the layout to classic and used a button code to get this format. Now I am stuck at trying to make it look like a conjoint project where there would be a column in the front that lists all the attributes. 

I am stuck however, in trying to make it look like the Qualtrics Guided Conjoint. That is why I mentioned a question on another project I am doing. 

Basically, I am trying to have an own conjoint but needs to modify the UI. 

Does that make sense?

​@TomG  This is what comes in Qualtrics Guided Conjoint . I want to create this manually in Qualtrics. I  have set the layout to classic. I want to have “Purchase” in place of radio buttons Option 1 to Option 4 and “No purchase” in place of radio button in “None”. 

So, when someone clicks the buttons the response is recorded. 

Is that possible?