JQuery duplicate HTML div and edit its content before appending to html body

Issue

I have a that contains some input fields like so:

 <div class="px-4 py-6 mb-4 border rounded-lg border-gray-400" id="datarow"

<div class="flex flex-row space-x-4 pb-5">
    <div class="relative z-0 w-full mb-5">
        <input type="text" id="f_name" name="f_name" placeholder="Enter Name here"
            required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
        <label for="f_name" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Name</label>
    </div>
    
    <div class="flex z-0 w-full justify-end">
        <input type="text" id="f_dest" name="f_dest" placeholder="Enter Destination here"
            required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
        <label for="f_dest" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Destination</label>
    </div>
</div>

And in jQuery I am duplicating the above div (on button click) and just appending to the main html body which would be displayed just below the original #datarow div. Heres the full snippet as how I have in my program.

$("#btn_addsector").click(function () {
    var div = document.getElementById("datarow"),
        clone = div.cloneNode(true);
 
     //neither of the lines work
     $(clone).find("#f_name").text = "Tisha";
    $("#maincontent").append(clone);
    $(clone).find("#f_name").text = "Tisha";
    $(clone).find("#f_name").text("Tisha");
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="maincontent" >
<button id="btn_addsector"
        class="bg-transparent hover:bg-secondary-dark text-secondary-dark font-semibold hover:text-white py-2 px-4 border border-secondary-dark hover:border-transparent rounded">
        Add Sector
    </button>
 
 <div class="px-4 py-6 mb-4 border rounded-lg border-gray-400" id="datarow">

    <div class="flex flex-row space-x-4 pb-5">
        <div class="relative z-0 w-full mb-5">
            <input type="text" id="f_name" name="f_name" placeholder="Enter Name here" value="Hannah"
                required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
            <label for="f_name" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Name</label>
        </div>
        
        <div class="flex z-0 w-full justify-end">
            <input type="text" id="f_dest" name="f_dest" placeholder="Enter Destination here" value="Smallville"
                required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
            <label for="f_dest" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Destination</label>
        </div>
    </div>
</div>

</div>

I can get the cloned div to appended properly but it does not alter the text of the input field.

Solution

There is multiple problem with your code:

1: You can't have multiple elements with the same ID, use class for this. So I've removed the id="f_name" and added it to the class selector class="the previous classes f_name"

2: To set the value of an input, you have to use .val() and not .text()

$(clone).find(".f_name").val("Tisha");

Demo

$("#btn_addsector").click(function() {
  var div = document.getElementById("datarow"),
    clone = div.cloneNode(true);

  //neither of the lines work
  $(clone).find(".f_name").val("Tisha");
  $("#maincontent").append(clone);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="maincontent">
  <button id="btn_addsector" class="bg-transparent hover:bg-secondary-dark text-secondary-dark font-semibold hover:text-white py-2 px-4 border border-secondary-dark hover:border-transparent rounded">
        Add Sector
    </button>

  <div class="px-4 py-6 mb-4 border rounded-lg border-gray-400" id="datarow">

    <div class="flex flex-row space-x-4 pb-5">
      <div class="relative z-0 w-full mb-5">
        <input type="text" name="f_name" placeholder="Enter Name here" value="Hannah" required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none f_name" />
        <label for="f_name" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Name</label>
      </div>

      <div class="flex z-0 w-full justify-end">
        <input type="text" name="f_dest" placeholder="Enter Destination here" value="Smallville" required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none f_dest" />
        <label for="f_dest" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Destination</label>
      </div>
    </div>
  </div>

</div>

Answered By - Carsten Løvbo Andersen