js ile ekle çıkar butonu yapma sorunu

Merhaba arkadaşlar dinamik bir yapıya sahip sayfada hesaplama sayfası yapıyorum hesaplama işini hallettim fakat takıldığım nokta ise aşağıda 1 ve 2 olarak yüklediğim resim deki gibi seçilen alanın butonuna ekle yerine çıkart yazması bunu bir türlü yapamadım yardımcı olursanız çok sevinirim.
Resim 1

Resim 2

Merhaba,

Bu gibi konularda bir jsfiddle falan eklerseniz daha iyi olur.

Html

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<button class="aksiyon"></button>

Jquery

$(".aksiyon").on('click', function(eve){
eve.preventDefault();
$(this).toggleClass("cikar");
});

Css

.aksiyon.cikar:after{
content: "Çıkar";
}

.aksiyon:after{
content: "Ekle";
}

Çalışan hali : https://jsfiddle.net/tsvqg1ar/1/

Şimdi hangisi eklendi hangisi çıkarıldı oda lazım olur...

https://jsfiddle.net/tsvqg1ar/2/

Bu arada data-id yerine $(this).data("id") 'de yazabilirsin'de hangi versiyonda buna geçti hatırlamıyorum. Sizin hangi versiyon kullandığınızıda bilmiyorum.

Bu arada vue'yu iyice öğrenmek lazımmış bir kez daha anladım

Biraz geç oldu kusura bakmayın ama çok teşekkür ederim ilginizden dolayı.