Js code to make tab content 
                                                                    _________________________________

const stringlist1 =`
LNC-0001.jpg
NFC-0001.jpg
KALKAJI-CIRCLE-0001.jpg
SARITA-VIHAR-0001.jpg
BADAR-PUR-CIRCLE-0001.jpg
`;

const stringlist2 =`
LNC.pdf
NFC.pdf
KALKAJI-CIRCLE.pdf
SARITA-VIHAR.pdf
BADAR-PUR-CIRCLE.pdf
`;

const  mobileString=`
8750871445
8750871449
8750871446
8750871448
8750871447
`;

const  phoneString=`
011-26242223
011-26825808
011-26460100
011-26825808
011-26460100
`;

const  emailString=`
lnc.81dtp[at]gmail[dot]com
sdvdtpolice[at]gmail[dot]com
kkc.traffic[at]gmail[dot]com
svcdtp[at]gmail[dot]com
tango74bdc[at]gmail[dot]com
`;

const  idString=`
lajpatnagarcir
newfriendcolonycir
kalkajicir
saritaviharcir
badarpurcir
`;



const  titleString=`
Traffic Inspector/ Lajpat Nagar
Traffic Inspector/ New Friends Colony Circle
Traffic Inspector/ Kalkaji
Traffic Inspector/ Sarita Vihar
Traffic Inspector/ Badarpur
`;



 const titleArray =  titleString.trim()
  .split('\n')
  .map(item => item.trim())
  .filter(item => item !== '');


 const idArray =  idString.trim()
  .split('\n')
  .map(item => item.trim())
  .filter(item => item !== '');

 const mobileArray = mobileString.trim()
  .split('\n')
  .map(item => item.trim())
  .filter(item => item !== '');


 const phoneArray = phoneString.trim()
  .split('\n')
  .map(item => item.trim())
  .filter(item => item !== '');

const emailArray = emailString.trim()
  .split('\n')
  .map(item => item.trim())
  .filter(item => item !== '');





const imagefilename =  stringlist1
  .trim()
  .split('\n')
  .map(item => item.trim())
  .filter(item => item !== '');



const pdffilename =  stringlist2
  .trim()
  .split('\n')
  .map(item => item.trim())
  .filter(item => item !== '');






let htmlOutput = '';

for (let i = 0; i < imagefilename.length; i++) {
  htmlOutput += `
  
  
  
  <div class="tab-pane fade show" id="${idArray[i]}">
   <div class="row g-4 traffic-circle-row">
      <div class="col-md-6 traffic-circle-row-container-txt">
         <div class="contact-card">
            <div class="contact-title">
             ${titleArray[i]}
            </div>
            <div class="contact-info">
               <img src="[[base_path]]/sites/default/files/images/know-your-traffic-circle/mobile.jpg" width="12" height="21"><strong> 
               ${mobileArray [i]}</strong>
            </div>
            <div class="contact-info">
               <img src="[[base_path]]/sites/default/files/images/know-your-traffic-circle/call.jpg" width="17" height="17"><strong> ${phoneArray[i]}</strong>
            </div>
            <div class="contact-info">
               <img src="[[base_path]]/sites/default/files/images/know-your-traffic-circle/email.jpg" width="17" height="13"><strong>${emailArray[i]}</strong>
            </div>
         </div>
      </div>
      <div class="col-md-4 traffic-circle-row-container">
         <a class="traffic-circle-map-link"
            href="[[base_path]]/sites/default/files/pdf/traffic-circle/${pdffilename[i]}"
            data-tooltip="View Larger Map"
            target="_blank">
         <img class="map-img"
            src="[[base_path]]/sites/default/files/images/know-your-traffic-circle/${imagefilename[i]}">
         </a>
      </div>
   </div>
     <!-- ==============How to reach  --->
</div>
 <!-- ================= end of tab content   ================= -->  
 
 
 
  <!-- ================= next section ================= -->  


-------------------------------------------
`;
}

console.log(htmlOutput);




________________________________________________________________________________

                              js code to get text node and grop them 
_____________________________________________________



(() => {
  const cards = document.querySelectorAll(
    ".tab-content .tab-pane .map-contact-card"
  );

  if (!cards.length) {
    alert("Koi map-contact-card nahi mila");
    return;
  }

  const groups = {
    TEXT: [],
    MOBILE: [],
    LANDLINE: [],
    EMAIL: []
  };

  Array.from(cards).forEach(card => {
    const lines = card.innerText
      .split("\n")
      .map(t => t.trim())
      .filter(Boolean)
      .filter((v, i, arr) => arr.indexOf(v) === i);

    lines.forEach(line => {
      if (/\[at\]|\[dot\]|@/i.test(line)) {
        groups.EMAIL.push(line);
      }
      // Mobile: 10 digit number starting with 6-9
      else if (/^[6-9]\d{9}$/.test(line)) {
        groups.MOBILE.push(line);
      }
      // Landline: starts with 0 + dash
      else if (/^0\d{2,4}-\d{6,8}$/.test(line)) {
        groups.LANDLINE.push(line);
      }
      else {
        groups.TEXT.push(line);
      }
    });
  });

  const output =
`=== GROUP 2 ===

-- DESIGNATION --
${groups.TEXT.join("\n")}

-- MOBILE --
${groups.MOBILE.join("\n")}

-- LANDLINE --
${groups.LANDLINE.join("\n")}

-- EMAIL --
${groups.EMAIL.join("\n")}`;

  const textarea = document.createElement("textarea");
  textarea.value = output;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);

  alert("Mobile, Landline, Email alag-alag group me copy ho gaye ✅");
})();
______________________________________________________________________

                                                                                  js code to make dcp acp column
                                                                          _______________________________




const setitleString = `
ddddddd
ffffff
`;
const setMobileString = `
8989889
88888

`;
const setPhoneString = `
0111
0222

`;
const setEmailString = `
sdasdasdad
dDDd
`;
const setTileArray = setitleString
  .trim()
  .split('\n')
  .map(item => item.trim())
  .filter(item => item !== '');
const setMobileArray = setMobileString
  .trim()
  .split('\n')
  .map(item => item.trim())
  .filter(item => item !== '');
const setPhoneArray = setPhoneString
  .trim()
  .split('\n')
  .map(item => item.trim())
  .filter(item => item !== '');
const setEmailArray = setEmailString
  .trim()
  .split('\n')
  .map(item => item.trim())
  .filter(item => item !== '');
let htmlOutput = ``;
for (let i = 0; i < setTileArray.length; i++) {
  htmlOutput += `
      <div class="col-md-4 traffic-circle-row-container-txt">
         <div class="contact-card">
            <div class="contact-title">
               ${setTileArray[i]}
            </div>
            <div class="contact-info">
               <img src="[[base_path]]/sites/default/files/images/know-your-traffic-circle/mobile.jpg" width="12" height="21">
               <strong> ${setMobileArray[i]}</strong>
            </div>
            <div class="contact-info">
               <img src="[[base_path]]/sites/default/files/images/know-your-traffic-circle/call.jpg" width="17" height="17">
               <strong> ${setPhoneArray[i]}</strong>
            </div>
            <div class="contact-info">
               <img src="[[base_path]]/sites/default/files/images/know-your-traffic-circle/email.jpg" width="17" height="13">
               <strong> ${setEmailArray[i]}</strong>
            </div>
         </div>
      </div>

  
 `;
}
htmlOutput += `      <div class="col-md-4 traffic-circle-row-container">
         <a class="traffic-circle-map-link" href="[[base_path]]/sites/default/files/pdf/traffic-circle/SOUTH-EAST-DISTICT-TRAFFIC.pdf" data-tooltip="View Larger Map" target="_blank"><img class="map-img" src="[[base_path]]/sites/default/files/images/know-your-traffic-circle/SOUTH-EAST-DISTICT-TRAFFIC.jpg" width="2550" height="1650">&nbsp;</a>
      </div>
   </div>`;
console.log(htmlOutput);












_____________________________________________________________________________

                                                           js code to make tab
                                                __________________________


const idSetString = `
#ffff
#gttgt

`;
const titleSetString = `
ddddddddddd
ffffffffffffffffffff

`;
const titleSetArray = titleSetString
  .trim()
  .split('\n')
  .map(item => item.trim())
  .filter(item => item !== '');
const idSetArray = idSetString
  .trim()
  .split('\n')
  .map(item => item.trim())
  .filter(item => item !== '');
let htmlOutput = `<ul class="nav nav-tabs mb-4" >`;
for (let i = 0; i < idSetArray.length; i++) {
  htmlOutput += `
     
   <li class="nav-item">
         <button class="nav-link traffic-circle-tab" data-bs-toggle="tab" data-bs-target="${idSetArray[i]}">

              ${titleSetArray[i]}

         </button>
      </li>
  
 `;
}
htmlOutput += `</ul>`;
console.log(htmlOutput);



_________________________________________________________________________________

                                                                   copy image filename
---------------------------------------------------------------------------------------------------


(() => {
  const text = Array.from(document.querySelectorAll(".tab-content img"))
    .filter(img => img.src)
    .map(img => img.src.split("/").pop())
    .filter(name => !/call|mobile|email/i.test(name))
    .join("\n");

  const textarea = document.createElement("textarea");
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);

  alert("Image file names clipboard me copy ho gaye ✅");
})();

______________________________________________________________________

                    
                                                                   copy pdf filename
---------------------------------------------------------------------------------------------------


(() => {
  const text = Array.from(
    document.querySelectorAll(".tab-content .map-wrapper > a")
  )
    .filter(a => a.href)
    .map(a => a.href.split("/").pop())
    .filter(name => /\.pdf$/i.test(name)) // sirf PDF files
    .join("\n");

  const textarea = document.createElement("textarea");
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);

  alert("PDF file names clipboard me copy ho gaye ✅");
})();



____________________________________________________________________________

                                              js code to copy text node
--------------------------------------------------------------------------------------------


(() => {
  const card = document.querySelector(".map-contact-card");
  if (!card) {
    alert("Element nahi mila");
    return;
  }

  const text = card.innerText
    .split("\n")
    .map(t => t.trim())
    .filter(Boolean)
    .filter((v, i, arr) => arr.indexOf(v) === i)
    .join("\n");

  const textarea = document.createElement("textarea");
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);

  alert("Duplicate hata kar text copy ho gaya ✅");
})();

______________________________________________________

                                                                     js code to copy text node with parent and all child
-------------------------------------------------------------------------------------------------------------------------------------------------





  
(() => {
  const cards = document.querySelectorAll(
    ".tab-content .tab-pane .map-contact-card"
  );

  if (!cards.length) {
    alert("Koi map-contact-card nahi mila");
    return;
  }

  const allText = Array.from(cards)
    .map((card, index) => {
      const uniqueText = card.innerText
        .split("\n")
        .map(t => t.trim())
        .filter(Boolean)
        .filter((v, i, arr) => arr.indexOf(v) === i)
        .join("\n");

      return `--- Tab Pane ${index + 1} ---\n${uniqueText}`;
    })
    .join("\n\n");

  const textarea = document.createElement("textarea");
  textarea.value = allText;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);

  alert("Sabhi tab-pane ke map-contact-card ka text copy ho gaya ✅");
})();




________________________________________________________________________________





                               template blank structure 
                              _____________________________



<div class="container py-4">
   <!-- ================= Details DCP/ ACP/ Traffic (South east District) ================= -->
   <div class="row g-4 mb-4 traffic-circle-row">

     <!-- ================= DCP ACP CONTACTS ==========================================================================-->








   <!-- ================= TABS ==========================================================================-->
             







   <!-- ================= TABS Content ======================================================== -->

   <div class="tab-content traffic-circle-content">






        </div> <!-- ================= tab pane end   ================= --> 



   </div>  <!-- ================= row end   ================= -->  
</div>  <!-- ================= conatiner end  ================= -->