Get and set an image URL via jquery

I'm trying to get the image URL from an "img" tag and then set it in another tag. I'm trying to use the attr() function to set the src text of the image but is not working.

var n_rows = $('#r_data_5').text();
var data = $('#datos_ocultos > ul > li');
var index = 0;
for (let i = 0; i< parseInt(n_rows); i++){
 var img = document.createElement('img');
 var src = data.eq(index).find('#r_data_4').attr('src');
 img.attr('src', src);
}

<div id="datos_ocultos" style="display: none;">
 <p class="report_data" id="r_data_5">
  <t t-esc="number_rows" />
  </p>
  <ul>
   <t t-foreach="report_ids" t-as="report">
    <t t-if="report.teacher_id and report.subject_id">
     <li>
      <p class="report_data" id="r_data_0">
       <t t-esc="report.teacher_id.name " />
      </p>
      <p class="report_data" id="r_data_1">
       <t t-esc="report.subject_id.display_name " />
      </p>
      <p class="report_data" id="r_data_2">
       <t t-esc="report.course_id.display_name " />
      </p>
      <p class="report_data" id="r_data_3">
       <t t-esc="report.teacher_id.work_email " />
      </p>
      <img t-att-src="'/web/image/hr.employee/%s/image' % report.teacher_id.id" width="96" height="65" id="r_data_4"/>
//more code

Uncaught TypeError: img.attr is not a function

Any suggestion? Thanks for reading!