Change span element to a textarea element with JQuery

Question

I want to change my second div span with a class of 'task' into a textarea with a click event. I gave the span an ID and data value to try and compare. However, Whenever I compare both the ID and the data value to try and select just one of the span task, all of the other span with the class of 'task' are also selected. I also tried looping through them and the same thing happened. What can I do so that when I select just one span task, only that one is changed into a textarea?

My Div structure:

  for (let i = 0; i < 10; i++) {
        startTime.add('hour', 1);
        let testDiv = `
        <div class="row d-flex justify-content-center align-items-center">
        <div class="col-3 text-right bg-danger">
            <span>${startTime.format('hh A')}</span>
        </div>
        <div class="col-6 text-center">
            <span data=${i} class="task" id=${i}>Shoping</span>
        </div>
        <div class="col-3 bg-info rounded-right d-flex justify-content-center align-items-center py-3"><i
                class="fas fa-save"></i></div>
        </div>
        `
        $('.container').append(testDiv)
    }

change to textarea element on click:

$('.col-6').on('click', 'span', (e) => {
        let text = $(this).text().trim();
        let taskID = $(e.target).attr('data')
        let spanID = e.target.id
        let span = $('.col-6')

        // if (taskID === spanID) {
        // const textarea = $('<textarea>').text(text);
        // $(span).replaceWith(textarea);
        // console.log(text);
        // }

        span.each((index, e) => {
            if (span[index] === e.target) {
                const textarea = $('<textarea>').text(text);
                $(span).replaceWith(textarea);
                console.log(text);
            }
        })

    });

question from:https://stackoverflow.com/questions/65877908/change-span-element-to-a-textarea-element-with-jquery

Answer 1

You are targetting all div i.e : .col-6 instead you can simply use .closest() to get closest div from span and replace it .

Demo Code :

$(document).on('click', 'span.task', function() {
  let text = $(this).text().trim();
  let span = $(this).closest('.col-6') //get closest div
  const textarea = $('<textarea>').text(text);
  $(span).html(textarea); //add here 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row d-flex justify-content-center align-items-center">
    <div class="col-3 text-right bg-danger">
      <span>23:12</span>
    </div>
    <div class="col-6 text-center">
      <span data=1 class="task" id=1>Shoping</span>
    </div>
    <div class="col-3 bg-info rounded-right d-flex justify-content-center align-items-center py-3"><i class="fas fa-save"></i></div>
  </div>
  <div class="row d-flex justify-content-center align-items-center">
    <div class="col-3 text-right bg-danger">
      <span>22:12</span>
    </div>
    <div class="col-6 text-center">
      <span data=2 class="task" id=2>Playing.. </span>
    </div>
    <div class="col-3 bg-info rounded-right d-flex justify-content-center align-items-center py-3"><i class="fas fa-save"></i></div>
  </div>
  <div class="row d-flex justify-content-center align-items-center">
    <div class="col-3 text-right bg-danger">
      <span>24:12</span>
    </div>
    <div class="col-6 text-center">
      <span data=3 class="task" id=3>Dancing..</span>
    </div>
    <div class="col-3 bg-info rounded-right d-flex justify-content-center align-items-center py-3"><i class="fas fa-save"></i></div>
  </div </div>