Wystawianie aukcji z ekwipunku

[Karotek]

Witam,
ponieważ znalazłem trochę  przedmiotów w górach, a sam nie będę z nich korzystał chciałem je wystawić na sprzedaż.

I muszę powiedzie że to jest jakaś masakra ...
Znalezienie przedmiotu na liście jest naprawdę trudne szczególnie jeśli ma się tego sporo,
przedmiotu nie są pogrupowane na rodzaje, nie są alfabetycznie, do tego na początku mają podaną ilość przez co nie da się ich łatwo wyszukiwać wciskając pierdzą literę nazwy na klawiaturze.

Dlatego proponowałbym zrobienie przynajmniej opcji wystawiania aukcji z poziomu ekwipunku,
czyli tak jak teraz przy każdym przedmiocie mamy sprzedaj to dodajemy opcję wystaw na targu.
Żeby tego niepotrzebnie nie komplikować na początek myślę że będzie wystarczające jeśli zostaniemy przeniesieni do obecnego okna wystawiania aukcji ale z domyślnie zaznaczonym przedmiotem.

[Karotek]

może komuś się przyda
co to robi ? A to co pisałem czyli dodaje przycisk do wystawiana na sprzedaż w ekwipunku.
Skrypt został napisany w jakieś 15 minut więc proszę się nie spodziewać cudów, to ma wady
przykładowo przedmioty nie znikają natychmiast, a jeśli chcemy zmienić kategorie przedmiotów trzeba odświeżyć stronę, przejść na odpowiednią zakładkę i dopiero uruchomić skrypt

Kod:

modal = (przedmiot) =>
{
let div = document.createElement('div');
div.innerHTML =
`<div style="position: fixed;top: 50%;left: 50%;right: 50%;bottom: 50%;transform: translate(-50%,-50%);width: 515px;">


<table class="middlepart" cellspacing="0" cellpadding="0">
<tbody><tr><td class="uppermid1">
 <div style="display: flex;justify-content: flex-end;">
<span style="color: #fff;font-size: 1.5rem;font-family: sans-serif;" class="close">X</span>
</div>
</td></tr>
<tr><td class="middlemid" valign="top">
<div id="middle">
    Ilość: <input type="text" name="amount" value="1" /><br />
    Cena: <input type="text" name="cost" value="0" /><br />
    Przedmiot: <input type="text" name="przedmiot" value="${przedmiot}" /><br />
    <button>Wystaw</button>
</div>
</td></tr>
<tr><td class="bottommid"></td></tr>
</tbody></table>
</div>`;
div.querySelector('.close').onclick=()=>{
        div.remove();
        };

div.querySelector('button').onclick=()=>{
            fetch('imarket.php?view=add&step=add', {
                method: 'POST',
                headers: {'Content-Type':'application/x-www-form-urlencoded'},
                body: 'przedmiot='+przedmiot
                +'&amount='+div.querySelector('[name="amount"]').value                
                +'&cost='+div.querySelector('[name="cost"]').value
            });
            div.remove();
        };        
        
return div;
}

const a = Array.from(document.querySelectorAll('a'))
          .filter(el=>el.innerText=='sprzedaj');
const reg = /sell=([0-9]+)'/;
for(const elA of a){
    let span = document.createElement('span');
    span.innerHTML=' | ';
    elA.after(span);
    let button = document.createElement('button');
    button.innerHTML='Wystaw';
       button.dataset['id']=elA.attributes['onClick'].nodeValue.match(reg)[1];
    
    
    button.onclick=(e)=>{
        document.querySelector('body').appendChild(modal(e.target.dataset['id']));
    };
    span.appendChild(button);
    
}