Witam wszystkich,
staram się wykonać małą apkę tworzenia faktur.
Wygląd interface'u już przygotowany, ale zablokowałem się przy dynamice w javascript.

Mianowicie, chciałbym osiągnąć trzy elementy:
1. Dynamiczne dodawanie inputów (dodawanie kolejnych pozycji na fakturze).
2. Zliczanie wartości brutto (cena netto * stawka vat * ilość).
3. Aby dodawane inputy całkowicie współdziałały z css'em.

Pierwszy element w miarę załatwiłem poniższym skryptem:
(z = 2, gdyż pierwsze pole jest od razu widoczne).
  1. <div class="md-card-content">
  2. <div class="uk-grid" id="myTabContent" data-uk-grid-margin>
  3. <!-- Tu podawane są nowe pozycje -->
  4. </div>
  5. </div>
  6.  
  7. <script type='text/javascript'>
  8. var z = 2;
  9. //<![CDATA[
  10. $(function () {
  11.  
  12. $("#btn").click(function () {
  13. $('#myTabContent').append(
  14. '<div class="uk-width-medium-1-10"><div class="uk-form-row"><input name="fvat_pozycja_lp_'+(z)+'" type="text" value="'+(z)+'." class="md-input" /></div></div><div class="uk-width-medium-2-10"><div class="uk-form-row"><input name="fvat_pozycja_towar_'+(z)+'" type="text" class="md-input" /></div></div><div class="uk-width-medium-1-10"><div class="uk-form-row"><select name="fvat_pozycja_jm_'+(z)+'" id="select_demo_1" data-md-selectize><option value=""></option><option value="1">usł.</option><option value="2">szt.</option><option value="3">mb</option><option value="4"></option><option value="5"></option></select></div></div><div class="uk-width-medium-1-10"><div class="uk-form-row"><input name="fvat_pozycja_ilosc_'+(z)+'" type="text" onkeyup="licz_'+(z)+'(this.form)" class="md-input" /></div></div><div class="uk-width-medium-2-10"><div class="uk-form-row"><input name="fvat_pozycja_netto_'+(z)+'" type="text" onkeyup="licz_'+(z)+'(this.form)" class="md-input" /></div></div><div class="uk-width-medium-1-10"><div class="uk-form-row"><select name="fvat_pozycja_vat_1'+(z)+' id="select_demo_1" onkeyup="licz_'+(z)+'(this.form)" data-md-selectize><option value=""></option><option value="1.00">ND</option><option value="1.00">ZW</option><option value="1.00">0%</option><option value="1.08">8%</option><option value="1.23">23%</option></select></div></div><div class="uk-width-medium-2-10"><div class="uk-form-row"><input name="fvat_pozycja_brutto_'+(z)+'" type="text" class="md-input" /></div></div>');
  15. console.log($(".searchInput"));
  16. z++;
  17. $(".searchInput").autocomplete({
  18. source: availableTags
  19. });
  20. });
  21. });
  22. //]]>


Drugi element (zliczanie) działa tylko na pierwszym od początku umieszczony zestawieniu inputów
  1. <script language="javascript">
  2. function licz_1(x){
  3. x.fvat_pozycja_brutto_1.value=(x.fvat_pozycja_vat_1.value)*(+x.fvat_pozycja_netto_1.value)*(+x.fvat_pozycja_ilosc_1.value)
  4. }


Kwestia CSS'a jest o tyle problematyczna, że dodawane pole nie w pełni korzystają z przyznanego kodu. Tak jakby w sprawach istotnych działało (szerokość divów i statyczne zachowanie, ale kwestie estetyczne i dynamika wyglądu już nie działa.)

Bardzo proszę o wskazówki i pomoc.
Javascript jest dla mnie czarną magią, ale staram się jak mogę ;-)
Z góry dziękuję za pomoc.