Некорректно работает кнопка JS?

JS

function workSerf(elem) {	
	$(document).ready(function(){
	    var id = $(elem).attr('data-id');
	    var workSerf = $(elem).attr('data-click');
	    var work = $('h6.work').attr('id');
	    console.log(id,workSerf,work);
	    $.ajax({
		    method: "POST",
		    url: "/add",
		    cache: false,
		    data: {
		        id: id, 
		        work: work,
		        workSerf: workSerf,
		    },
		    success: function(html){
		    	$('div.AddSerf').load(document.URL + ' div.addSerfCards');
		    }
		});
	}); 
};

HTML

<div class="addSerfCardsButtonBox" data-click="workSerf" data-id='<?=$serfing["id"]?>' onclick='workSerf(this)'>
										<? if($serfing['work'] == 'Остановлено'){echo '<i class="far fa-play-circle"></i><h6 class="work" id="play">Возобновить показ</h6>';}
										else{ echo '<i class="far fa-pause-circle"></i><h6 class="work" id="stop">Остановить показ</h6>';}?>
									</div>

Лог работы скрипта

(Первые цифры это id блоков)

Допустим имеются 2 блока под id 22 и 28 причина заключается в том что существует 2 кнопки в этих блоках и при нажатии на кнопку информация внутри кнопок должна меняться

но что то пошло не так и информация меняется только у верхней кнопки под id 22 вторая кнопка срабатывает только раз и только после нажатия первой кнопки и то тогда когда по первой кнопке был совершен 1 клик а следом на вторую. Как это исправить?(