Sort function not working as expected after putting getElementById this way

I'm a begginer figuring out my own first project but I can't get info about this case.

The application is supossed to receive data about a product, it's name, price, stock, number of sales and then sort them from the most sold to the less sold.

Here's the thing, I was trying to shorten how verbose the code was by putting this chunk this other way

so I went from this

var balanceVenta = (ev) =>{
    ev.preventDefault();  

    diseños.sort((a,b) => { return (a.ammountSold < b.ammountSold) ? 1 : -1 });   

    document.getElementById("name1").innerHTML = diseños[0].designName;
    document.getElementById("stock1").innerHTML = diseños[0].currentStock;
    document.getElementById("price1").innerHTML =  "$" + diseños[0].priceEa;
    document.getElementById("sold1").innerHTML = diseños[0].ammountSold;
    document.getElementById("lastProduction1").innerHTML = diseños[0].productionAmmount;

    document.getElementById("name2").innerHTML = diseños[1].designName;
    document.getElementById("stock2").innerHTML = diseños[1].currentStock;
    document.getElementById("price2").innerHTML = "$" +  diseños[1].priceEa;
    document.getElementById("sold2").innerHTML = diseños[1].ammountSold;
    document.getElementById("lastProduction2").innerHTML = diseños[1].productionAmmount;

    document.getElementById("name3").innerHTML = diseños[2].designName;
    document.getElementById("stock3").innerHTML = diseños[2].currentStock;
    document.getElementById("price3").innerHTML =  "$" + diseños[2].priceEa;
    document.getElementById("sold3").innerHTML = diseños[2].ammountSold;
    document.getElementById("lastProduction3").innerHTML = diseños[2].productionAmmount;

}

to this

var index = 0;

var balanceVenta = (ev) =>{
    ev.preventDefault();
        
    diseños.sort((a,b) => { return (a.ammountSold > b.ammountSold) ? 1 : -1 }); 


    index ++ ;
    var prefixName= "name";
    var prefixStock= "stock";
    var prefixPrice = "price";
    var prefixSold = "sold";
    var prefixLastProd = "lastProduction";

        document.getElementById(prefixName + index).innerHTML = diseños[index - 1].designName;
        document.getElementById(prefixStock + index).innerHTML = diseños[index - 1].currentStock;
        document.getElementById(prefixPrice + index).innerHTML = diseños[index - 1].priceEa;
        document.getElementById(prefixSold+ index).innerHTML = diseños[index - 1].ammountSold;
        document.getElementById(prefixLastProd + index).innerHTML = diseños[index - 1].productionAmmount;
        
}

Everything works fine except for the sort function, which was working fine in the first version, but not working at all in the second one.

Pd: "diseños" is an Array which holds an object inside each index through this function

let diseños = [];
const addDesign = (ev)=>{
    ev.preventDefault();  
    let diseño = {  
        designName: document.getElementById("textBox1").value, 
        currentStock: document.getElementById("textBox2").value,
        productionAmmount: document.getElementById("textBox3").value, 
        priceEa: document.getElementById("textBox4").value, 
        ammountSold: document.getElementById("textBox5").value
    
    }
    diseños.push(diseño);
    document.forms[0].reset();

Can you guys help me out figure this one out? Thanks!