How to use javascript Dom scrapping to grab the div text concatenated with pipe?

I have the following code on the webpage it contains multiple divs with a common data attribute for b tag and p tag as prescription name (title) and prescription description, I need to capture title description combination with pipe using DOM scrapping javascript output I need is T1 D1|T2 D2 |T3 D3 and so on in a variable as soon as a user lands on this page how to capture this ?

<div data-v-46636d4a="" class="panel_2N_jF"><div data-v-46636d4a="" data-purpose="selected-prescription"><b data-v-46636d4a="" data-purpose="prescription-name">T1 title1</b> <p data-v-46636d4a="" data-purpose="prescription-description">D1 description1</p></div><div data-v-46636d4a="" data-purpose="selected-prescription"><b data-v-46636d4a="" data-purpose="prescription-name">T2 title 2</b> <p data-v-46636d4a="" data-purpose="prescription-description">D2 description2</p></div><div data-v-46636d4a="" data-purpose="selected-prescription"><b data-v-46636d4a="" data-purpose="prescription-name">T3 title3</b> <p data-v-46636d4a="" data-purpose="prescription-description">D3 description3</p></div> </div></div>

I tried this code and it gives me the result but what if I have multiple divs with b tag and p tag but same data custom attribute like this then how to code this better ?

console.log(document.querySelector("body > div:nth-child(1) > div:nth-child(1) > b").textContent+' '+document.querySelector("body > div:nth-child(1) > div:nth-child(1) > p").textContent+' '+'|'+document.querySelector("body > div:nth-child(1) > div:nth-child(2) > b").textContent+' '+document.querySelector("body > div:nth-child(1) > div:nth-child(2) > p").textContent+' '+'|'+document.querySelector("body > div:nth-child(1) > div:nth-child(3) > b").textContent+' '+document.querySelector("body > div:nth-child(1) > div:nth-child(3) > p").textContent);

const prescriptions = [...document.querySelectorAll("[data-purpose='selected-prescription']")];
const titleDescStr = => {
  const [ titleElem, descElem ] = [...prescription.children];
  return titleElem.textContent + ' ' + descElem.textContent;
console.log(titleDescStr); // displays T1 title1 D1 description1|T2 title 2 D2 description2|T3 title3 D3 description3

randelDawson this works like a charm thanks

but 2 question as am new to JS

  1. can i use var instead of const what is the use of const
  2. what is the significance of […

considering my tool is not that advanced to take this advance js code then how to simply the code and write?

You should check out our curriculum here and you will learn all about the syntax I provided you.

also is it possible for you to transpile this code and send me

I will let you work on that.