How do I prevent a jQuery function (that reads title attributes on 1st row th's of thead's) to apply retrieved titles to all tables in a document?

Question

The facts: I have no jQuery experience or knowledge and this is my first ever question on Stack Overflow.

The need: I'm building a website using Bootstrap 3.3.6 with multiple, very complex data tables that have to be dynamically stacked on mobile devices via CSS. The column header has to be repeated otherwise the td values has no significance. Since the website is bilingual I want to have control over what the mobile td header says.

The solution: a jQuery function that stores custom headers – entered via the title attribute in the first row th of each table – in an array, which it then adds via the CSS content property to each td in the tbody.

The problem: the above function works well .. except when there are more than one table in a document. The function then applies the titles from the FIRST table to ALL tables in the document.

What I want: 1) To give a unique id attribute to ONLY the tables that need to have the above function applied to. 2) Tables with no id attribute should be ignored. 3) The function then has to retrieve and apply the titles of each unique table to each respective table tbody. 4) I am concerned about this function possibly interfering with any other scripts, like Modernizr or prettyPhoto for example?

JSFiddle: what I have so far

(function() {
    "use strict";
    var tableIds = Array();
    $('table').each(function(tid) {
        if (tableIds) {
            tableIds[tid] = $(this).attr('id');
        }
        var currentId = tableIds[tid];
        alert('Id is: ' + currentId);
    });

    var header = Array();
    /*get titles from the headings*/
    $('thead tr:first-child th').each(function(i) {
        if (header) {
            header[i] = $(this).attr('title');
        }
    });
    /*loop through tbody rows and apply headings to each td*/
    $('tbody tr').each(function() {
        var thRow = $(this);
        thRow.find('td').each(function(j) {
            $(this).attr('title', header[j]);
        });
    });
}());

Answer 1

Assuming your table structure is like the table given below, Then just assign a class applyHeader to the table you want the title to be applied

<u>Table1</u>
<table class="applyHeader">
  <thead>
    <tr>
      <th title="header11">header1</th>
      <th title="header12">header2</th>
      <th title="header13">header3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col11</td>
      <td>col12</td>
      <td>col13</td>
    </tr>
  </tbody>
</table>
<br>
<u>Table2</u>
<table class="applyHeader">
  <thead>
    <tr>
      <th title="header21">header1</th>
      <th title="header22">header2</th>
      <th title="header23">header3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col21</td>
      <td>col22</td>
      <td>col23</td>
    </tr>
  </tbody>
</table>
<br>
<u>Table3</u>
<table >
  <thead>
    <tr>
      <th title="header31">header1</th>
      <th title="header32">header2</th>
      <th title="header33">header3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col31</td>
      <td>col32</td>
      <td>col33</td>
    </tr>
  </tbody>
</table>

Use the below Function to get the desired Result

   (function() {
      "use strict";
      $('table.applyHeader').each(function() {
          var tableSelected=this;
      $(this).find('th').each(function(index) {
       var headerTitle = $(this).attr('title');
       $(tableSelected).find('tbody').find('td').eq(index).attr('title',headerTitle);
      });
      });

  }());

EDIT 1: - Jsfiddle Demo Link