Herkese Merhaba

Kafe Otomasyonu Yapıyorum
Buradaki modal ile parçalı ödeme işlemi gerçekleştirmek istiyorum ancak sorunlarım var



Sorun1) div içerisene append edince çapraz geliyor toplam divin içerisine ödeme tipi..


sorun2) parçalı ödeme sistemini oturtamadım yardım ederseniz çok mutlu olurum

kaynak kodlar

$(document).ready(function () {
    $('.islem').click(function (event) {
      var masa_id = $(this).attr("data-id");
      var masa_adi = $(this).attr("data-masa-adi");
      var masa_durum = $(this).attr("data-durum");
      var grup = $(this).attr("data-grup");
      $('#ode').click(function (event) {
        if(masa_durum==1){
          $("#ode_masa_adi").html(masa_adi);
          $("#ode_modal").modal("show");
          $("#islem_modal").modal("hide");
          islem=9;
          $.ajax({
              type: 'POST',
              url: site_url+'pages/ajax.php',
              data: { islem:islem,masa_id:masa_id,masa_durum:masa_durum,grup:grup},
                success: function (data) {

                  //$("#siparis_kaydet").attr("data-durum",durum);
                  //$("#siparis_kaydet").attr("data-masaID",masa_id);

                  var div = $('#urunler'),
                  height = div.height();

                  var veri=JSON.parse(data);
                  var toplam_hesap= 0;
                  for(var i=0; i<veri.length; i++)
                    {

                        var urun_kodu = veri[i].urun_kodu;
                        var urun_adi = veri[i].urun_adi;
                        var urun_adet = veri[i].adet;
                        var urun_fiyat = veri[i].fiyat;

                        var icerik = '<div class="col-md-12 mb-3"><span class="str'+urun_kodu+'">'+urun_adet+'</span><span class="str'+urun_kodu+'">'+urun_adi+'</span><a href="#" class="ok" data-adet="'+urun_adet+'" data-fiyat="'+urun_fiyat+'" data-urun-kodu="'+urun_kodu+'"><i class="bx bx-undo float-end bx-sm ok'+urun_kodu+'" style="display:none"></i></a><a href="#" class="ode_liste text-dark" data-adet="'+urun_adet+'" data-fiyat="'+urun_fiyat+'" data-kod="'+urun_kodu+'"><i class="bx bxs-hand float-end bx-sm el'+urun_kodu+'"></i></a><span class="float-end str'+urun_kodu+'">'+urun_fiyat+'</span></div>';

                        div.append(icerik);
                        div.animate({scrollTop: height}, 500);
                        height += div.height();
                        hesap = urun_fiyat*urun_adet;
                        toplam_hesap = toplam_hesap + hesap;
                    }

                    $("#odenecek_tutar").text(toplam_hesap)
                    $("#toplam_hesap").text(toplam_hesap+'₺')
                    sonuc = 0;
                    sonuc2 = 0;
                    $(".ode_liste").click(function () {
                        var kod = $(this).attr("data-kod");
                        var fiyat = $(this).attr("data-fiyat");
                        var adet = $(this).attr("data-adet");

                        $(".str"+kod).css({"textDecoration": "line-through"});
                        $(".el"+kod).hide()
                        $(".ok"+kod).show()

                        sonuc = Number(sonuc)+Number(fiyat)*Number(adet);

                        $("#parcali_ode").text(sonuc)
                        $("#nakit_div").addClass('bg-soft-danger');
                        $("#kart_div").addClass('bg-soft-danger');
                        $("#acik_div").addClass('bg-soft-danger');
                        $("#nakit_div").addClass('animate__bounceIn');
                        $("#kart_div").addClass('animate__bounceIn');
                        $("#acik_div").addClass('animate__bounceIn');

                    })

                    $(".ok").click(function () {
                        var kod = $(this).attr("data-urun-kodu");
                        var deger = $("#parcali_ode").text();
                        var fiyat = $(this).attr("data-fiyat");
                        var adet = $(this).attr("data-adet");
                        $(".el"+kod).show()
                        $(".ok"+kod).hide()
                        $(".str"+kod).css({"textDecoration": ""});

                        sonuc = Number(deger)-Number(fiyat)*Number(adet);
                        $("#parcali_ode").text(sonuc)

                        $("#nakit_div").removeClass('bg-soft-danger');
                        $("#kart_div").removeClass('bg-soft-danger');
                        $("#acik_div").removeClass('bg-soft-danger');
                        $("#nakit_div").removeClass('animate__bounceIn');
                        $("#kart_div").removeClass('animate__bounceIn');
                        $("#acik_div").removeClass('animate__bounceIn');


                    })

                    $(".ode_liste").click(function () {
                        var deger = $("#parcali_ode").text();
                        $("#odenecek_tutar").text(deger)
                    })



                    $("#ode_nakit").click(function () {
                      var deger = $("#odenecek_tutar").text();
                      if(deger != ''){

                          $("#odeme_tip_nakit").append('<div class="col-md-12 nakit_liste_div"><span style="font-size:15px; font-weight:bold;">Nakit</span><a href="#" id="nakit_liste_sil"><i class="float-end bx bx-trash bx-sm text-danger"></i></a><span style="font-size:15px" class="float-end">'+deger+'</span></div>')
                          var hesap = toplam_hesap - deger;
                          $("#odenecek_tutar").text(hesap);


                        //Nakit Silme
                        $("#nakit_liste_sil").click(function () {
                          $("#odeme_tip_nakit").empty();
                        })

                      }else{
                        alert("Ödenecek Tutar Boş Olamaz")
                      }
                    })

                    $("#ode_kart").click(function () {
                      var deger = $("#odenecek_tutar").text();
                      if(deger != ''){
                        $("#odeme_tip_kart").html('<div class="col-md-12 nakit_liste_div mt-2"><span style="font-size:15px; font-weight:bold;">Kart</span><a href="#" id="kart_liste_sil"><i class="float-end bx bx-trash bx-sm text-danger"></i></a><span style="font-size:15px" class="float-end">'+deger+'</span></div>')
                        var hesap = toplam_hesap - deger;
                        $("#odenecek_tutar").text(hesap);

                        //Kart Silme
                        $("#kart_liste_sil").click(function () {
                          $("#odeme_tip_kart").empty();
                          deger = 0;
                        })

                      }else{
                        alert("Ödenecek Tutar Boş Olamaz")
                      }
                    })

              },
                error: function () {
                  Toastify({text: "İnternet bağlantınızı kontrol edin", gravity: "bottom", backgroundColor:"red", duration: 3000 }).showToast();
              }
          });
          masa_durum=='';
        }else{
          Toastify({text: "Masa Boş", gravity: "bottom", backgroundColor:"red", duration: 3000 }).showToast();
        }
        masa_id=null;
      })
    })
})