JSFiddle - React, Tailwind, and code Playground

by master1991

HTML

<input class="editMaterialQuantity" type="text" name="editMaterialQuantity" data-for="piece" data-material="1">
<input class="editMaterialPrice"    type="text" name="editMaterialPrice"    data-for="price" data-material="1" >

JavaScript

$(document).on('click', '.editMaterialQuantity, .editMaterialPrice', function() {
		$(this).css({"background-color":"#fff8a7", "color":"black"});

		var hasFired = false;
		$(this).blur(function() {

			if(!hasFired){

				hasFired = true;
				$(this).css({"background-color":"white", "color":"black"});

				var id = $(this).attr("data-material");
				var value = $(this).val();
				var dataFor = $(this).attr("data-for");

				/*
				$.ajax({
					url : 'editMaterialDetails.php?id=<?=$id;?>&material='+id+'&for='+dataFor,
					type: "POST",
					data: { value: value },
					beforeSend: function(){
						$("body").addClass("loading");
					},			
					success: function (data) {
						//console.log(data);
						$("body").removeClass("loading");
					},
					error: function (jXHR, textStatus, errorThrown) {
						alert(errorThrown);
						$("body").removeClass("loading");
					}
				});	
        */

			}		

		});	

	});