Trying to replace Input with P

I am trying to replace the input with the P element which contains what was written on the Input. I have tried not making the if, but it still won't work. the whole replaceWith is just not working. The end result would be the P element with the attributes class = " task m-auto" time = "00:00"

I have tried changing the function multiple times in multiple places and I still can manage to do it

$(".task").each(function () {
    $(this).on("click", function () {
        var text = $(this).text().trim();
        var time = $(this).attr("time");
        console.log(time);

        if (text === "Enter task here") {
            var textInput = $("<input>").prop("maxlength", "114");
            $(this).replaceWith(textInput);
        }
        else {
            var textInput = $("<input>").prop("maxlength", "114").val(text);
            $(this).replaceWith(textInput);
        }
        textInput.trigger("focus");
    });

    $(this).on("blur", "input", function () {
        var text = $(this).val();

        var taskP = $("<p>").addClass("hour m-auto").text(text);
        console.log(taskP)

        if (text === null || text === "") {
            $("<p>").addClass("hour m-auto").prop("time", time).text("Enter task here");
            console.log("good")
        }
        else {
            $(this).replaceWith(taskP);
            console.log("bad")
        }
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="timeList w-100 mt-3">
          <li class="timeSlot row shadow-sm mr-3 p-3 rounded">
            <div class="slotMinutes m-auto col-1">09:00</div>
            <div class="taskWrapper m-auto col-10">
              <p class="task m-auto" time="09:00">Enter task here</p>
            </div>
            <div class="col-1">
              <button class="save"><i class="bi bi-check-square"></i></button>
            </div>
          </li>
          <li class="timeSlot row shadow-sm mr-3 p-3 rounded">
            <div class="slotMinutes m-auto col-1">09:10</div>
            <div class="taskWrapper m-auto col-10">
              <p class="task m-auto" time="09:10">Enter task here</p>
            </div>
            <div class="col-1">
              <button class="save"><i class="bi bi-check-square"></i></button>
            </div>
          </li>
          <li class="timeSlot row shadow-sm mr-3 p-3 rounded">
            <div class="slotMinutes m-auto col-1">09:20</div>
            <div class="taskWrapper m-auto col-10">
              <p class="task m-auto" time="09:20">Enter task here</p>
            </div>
            <div class="col-1">
              <button class="save"><i class="bi bi-check-square"></i></button>
            </div>
          </li>
          <li class="timeSlot row shadow-sm mr-3 p-3 rounded">
            <div class="slotMinutes m-auto col-1">09:30</div>
            <div class="taskWrapper m-auto col-10">
              <p class="task m-auto" time="09:30">Enter task here</p>
            </div>
            <div class="col-1">
              <button class="save"><i class="bi bi-check-square"></i></button>
            </div>
          </li>
          <li class="timeSlot row shadow-sm mr-3 p-3 rounded">
            <div class="slotMinutes m-auto col-1">09:40</div>
            <div class="taskWrapper m-auto col-10">
              <p class="task m-auto" time="09:40">Enter task here</p>
            </div>
            <div class="col-1">
              <button class="save"><i class="bi bi-check-square"></i></button>
            </div>
          </li>
          <li class="timeSlot row shadow-sm mr-3 p-3 rounded">
            <div class="slotMinutes m-auto col-1">09:50</div>
            <div class="taskWrapper m-auto col-10">
              <p class="task m-auto" time="09:50">Enter task here</p>
            </div>
            <div class="col-1">
              <button class="save"><i class="bi bi-check-square"></i></button>
            </div>
          </li>
        </ol>

Solution

OK, hopefully this set you in the right direction.

The problem you had was that you were adding the "blur" event to elements that didn't exist yet.

Check out the use of deferred event handling below:

$(".timeList").on("click", "p.task", function(e)
{
  var text = $(this).text().trim();
  var time = $(this).attr("time");
  
  if (text === "Enter task here")
    text = "";
    
  let $textInput = $("<input>").addClass("task").attr("maxlength", "114").val(text);
    $(this).replaceWith($textInput);
    $textInput.trigger("focus");
});

$(".timeList").on("blur", "input.task", function(e)
{
  var text = $(this).val().trim();
  if(text === "") text = "Enter task here";
  var $taskP = $("<p>").addClass("task hour m-auto").text(text);

  $(this).replaceWith($taskP);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="timeList w-100 mt-3">
  <li class="timeSlot row shadow-sm mr-3 p-3 rounded">
    <div class="slotMinutes m-auto col-1">09:00</div>
    <div class="taskWrapper m-auto col-10">
      <p class="task m-auto" time="09:00">Enter task here</p>
    </div>
    <div class="col-1">
      <button class="save"><i class="bi bi-check-square"></i></button>
    </div>
  </li>
  <li class="timeSlot row shadow-sm mr-3 p-3 rounded">
    <div class="slotMinutes m-auto col-1">09:10</div>
    <div class="taskWrapper m-auto col-10">
      <p class="task m-auto" time="09:10">Enter task here</p>
    </div>
    <div class="col-1">
      <button class="save"><i class="bi bi-check-square"></i></button>
    </div>
  </li>
  <li class="timeSlot row shadow-sm mr-3 p-3 rounded">
    <div class="slotMinutes m-auto col-1">09:20</div>
    <div class="taskWrapper m-auto col-10">
      <p class="task m-auto" time="09:20">Enter task here</p>
    </div>
    <div class="col-1">
      <button class="save"><i class="bi bi-check-square"></i></button>
    </div>
  </li>
  <li class="timeSlot row shadow-sm mr-3 p-3 rounded">
    <div class="slotMinutes m-auto col-1">09:30</div>
    <div class="taskWrapper m-auto col-10">
      <p class="task m-auto" time="09:30">Enter task here</p>
    </div>
    <div class="col-1">
      <button class="save"><i class="bi bi-check-square"></i></button>
    </div>
  </li>
  <li class="timeSlot row shadow-sm mr-3 p-3 rounded">
    <div class="slotMinutes m-auto col-1">09:40</div>
    <div class="taskWrapper m-auto col-10">
      <p class="task m-auto" time="09:40">Enter task here</p>
    </div>
    <div class="col-1">
      <button class="save"><i class="bi bi-check-square"></i></button>
    </div>
  </li>
  <li class="timeSlot row shadow-sm mr-3 p-3 rounded">
    <div class="slotMinutes m-auto col-1">09:50</div>
    <div class="taskWrapper m-auto col-10">
      <p class="task m-auto" time="09:50">Enter task here</p>
    </div>
    <div class="col-1">
      <button class="save"><i class="bi bi-check-square"></i></button>
    </div>
  </li>
</ol>