Make two views for sort logic one for show the instructions and the other for add Instruction

Francesco.Recipes.World/Views/Shared/_GetInstructions.cshtml

@@ -6,7 +6,7 @@
 			<div class="instruction-controls">
 				<input type="file" />
 				<textarea placeholder="Beschreibung" class="form-control">@Model[i].Description</textarea>
-				<button type="button" class="btn-delete">🗑️</button>
+				<button type="button" class="btn-delete" onclick="removeInstruction('@Model[i].Id')">🗑️</button>
 			</div>
 			<div class="instruction-actions">
 				<button type="button" class="btn-move-up" onclick="moveInstructionUp('@Model[i].Id')">⬆️</button>
@@ -68,6 +68,32 @@
 			}
 		}
 
+		async function removeInstruction(instructionId) {
+			if (!confirm('Möchtest du diesen Schritt wirklich löschen?')) return;
+
+			try {
+				const response = await fetch(`/${recipeId}/RemoveInstruction/${instructionId}`, {
+					method: 'POST',
+					headers: {
+						'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
+					}
+				});
+
+				if (response.ok) {
+					const element = document.getElementById(`instruction-${instructionId}`);
+					if (element) {
+						element.remove();
+					}
+				} else {
+					const error = await response.json();
+					alert(error.Error || 'Fehler beim Löschen der Anweisung.');
+				}
+			} catch (error) {
+				console.error('Fehler beim Löschen:', error);
+			}
+		}
+
+
 		function addInstruction() {
 			const container = document.getElementById('instructions-container');
 			const newInstructionHtml = `