title: Need some directions on how to find dynamic DOM ID generated by JavaScript
body: <p>When I tried to scrape some websites, I found an issue I can’t find a solution.  I need to use JavaScript to select some data from a web page running AJAX.
  If I click on a button on the page, I can see from Chrome developer tools that there are many elements with dynamic IDs.
  For example: if I run JavaScript like this:
  var data = document.getElementsByClassName('title');
  I can see there are a lot of DOM items, the following is one of the elements.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html class="context-soccer yui3-js-enabled" lang="en-GB"&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;style&gt;
  a {
   text-decoration: none;
  }
  .com-bet-button {
   display: inline-block;
   text-align: center;
   height: 25px;
   line-height: 25px;
   font-size: 12px;
   font-weight: 700;
   border-width: 0;
   width: 42px;
   color: #fff;
   font-size: 13px;
   padding: 0;
   background-color: #2797e6;
  }
  a:active, a:hover {
   outline: 0;
  }
  a:focus {
   outline: thin dotted;
  }
  .com-bet-button:focus, .com-bet-button:hover {
   background-color: #2180c4;
  }
  .mod-minimarketview .ui-bet-button, .mod-minimarketview .ui-runner-active {
   height: 31px;
   line-height: 31px;
  }
  .mod-minimarketview .minimarketview-content .ui-bet-button {
   float: right;
  }
  menu, ol, ul {
   padding: 0 0 0 40px;
  }
  body {
   color: #1e1e1e;
   font-size: 12px;
  }
  blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
   margin: 0;
   padding: 0;
  }
  li {
   list-style: none;
  }
  .mod-minimarketview .minimarketview-content ul li {
   float: left;
   width: 212px;
  }
  .mod-minimarketview .minimarketview-content .runner-item {
   border-bottom: 1px solid #e1e1e1;
  }
  .mod-minimarketview .minimarketview-content .runner-item:hover, .mod-minimarketview .minimarketview-content ul.sortedMarketList &gt; li.sortedMarket:hover {
   background-color: #e1e1e1;
   transition: background-color .1s ease-in;
  }
  .mod-minimarketview .minimarketview-content .runner-list3 li.runner-item {
   width: 212px;
  }
  dl, menu, ol, ul {
   margin: 1em 0;
  }
  .mod-minimarketview .minimarketview-content {
   position: relative;
   float: left;
   width: 100%;
   transition: max-height 1s linear;
  }
  .mod-minimarketview {
   transition: max-height 1s linear;
   transition: margin-bottom .1s linear;
   float: left;
   width: 100%;
   *zoom:1: ;
   margin-bottom: 5px;
   background-color: #fff;
  }
  .mod-marketgroups .list-minimarkets {
   float: left;
   width: 100%;
   margin-top: 0px;
  }
  .mod-eventgroups .headtohead-container, .mod-eventgroups .redirect, .mod-eventgroups .update-container {
   float: left;
   width: 100%;
  }
  .module-placeholder {
   margin: 0 1px 5px;
  }
  #zone-rightcolumn &gt; .grid-1 &gt; .module-placeholder {
   width: 636px;
   float: left;
  }
  #zone-rightcolumn &gt; .grid-1 {
   width: 100%;
   float: left;
  }
  #zone-rightcolumn {
   width: 638px;
   float: left;
   position: relative;
  }
  #zone-left-right-columns {
   width: 1014px;
   margin: 0 auto;
  }
  #zone-container .scroller, .zone-container .scroller {
   padding: 20px 0 30px;
   display: block;
   *zoom:1: ;
  }
  .zone-container {
   width: auto !important;
  }
  #zone-container, .zone-container {
   position: relative;
   width: 100%;
   min-height: 600px;
  }
  body {
   margin: 0;
  }
  body {
   font-size: 1em;
   line-height: 1.4;
  }
  html {
   font-size: 100%;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
  button, html, input, select, textarea {
   color: #222;
  }
  html {
   -webkit-font-smoothing: antialiased;
  }
  html, html.page-virtual-sports {
   background-color: #e1e6ea !important;
  }
  button, html, input, select, textarea {
   font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif;
  }
  html {
   color: #000;
   background: #fff;
  }
  html {
   background: #ecf0f3 !important;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body class="lang-en jur-international" id="yui_3_5_0_1_1577049074725_23110" data-twttr-rendered="true"&gt;&lt;div class="zone-container" id="zone-container"&gt;&lt;div class="scroller context-event" id="yui_3_5_0_1_1577049074725_23109"&gt;&lt;div class="zone grid-1-1" id="zone-left-right-columns"&gt;&lt;div class="grid-1 last-grid" id="yui_3_5_0_1_1577049074725_23121"&gt;&lt;div class="zone grid-1 page-area page-column" id="zone-rightcolumn" data-column="Middle" data-page-area="Main"&gt;&lt;div class="grid-1 last-grid" id="yui_3_5_0_1_1577049074725_23120"&gt;&lt;div class="module-placeholder" id="yui_3_5_0_1_1577049074725_23119"&gt;&lt;div class="mod yui3-widget yui3-module yui3-eventgroups" id="mod-eventgroups-1015-container" data-mod-id="1015" data-mod-type="eventgroups"&gt;&lt;div class="mod-eventgroups mod-eventgroups-eventgroups yui3-eventgroups-content" id="mod-eventgroups-1015"&gt;&lt;div class="update-container" id="yui_3_5_0_1_1577049074725_23118"&gt;&lt;div class="mod yui3-widget yui3-module yui3-marketgroups" id="mod-marketgroups-1055-container" data-mod-id="1055" data-mod-type="marketgroups"&gt;&lt;div class="mod-marketgroups mod-marketgroups-marketgroups yui3-marketgroups-content" id="mod-marketgroups-1055"&gt;&lt;div class="updated-minimarkets" id="yui_3_5_0_1_1577049074725_23117"&gt;&lt;div class="list-minimarkets ui-event ui-29619519" id="yui_3_5_0_1_1577049074725_23116" data-eventid="29619519" data-rule="NO_RULE"&gt;&lt;div class="mod yui3-widget yui3-module yui3-minimarketview yui3-minimarketview-focused" id="mod-minimarketview-1056-container" data-mod-id="1056" data-mod-type="minimarketview"&gt;&lt;div class="mod-minimarketview mod-minimarketview-minimarketview yui3-minimarketview-content" id="mod-minimarketview-1056"&gt;&lt;div class="minimarketview-content minimarket-MATCH_ODDS-217161878 ui-market ui-924_217161878 ui-market-open" id="yui_3_5_0_1_1577049074725_27044" data-marketid="924.217161878"&gt;&lt;ul class="runner-list3 minimarketview-1056" id="yui_3_5_0_1_1577049074725_27043"&gt;&lt;li class="runner-item " id="yui_3_5_0_1_1577049074725_27042"&gt;&lt;a class="com-bet-button ui-bet-button ui-market-action bet-button-b6aa2daf38ef7fdfa20369ad99daf6d705818911 ui-runner ui-924_217161878-48350 ui-runner-active ui-betslip-action" id="yui_3_5_0_1_1577049074725_27041" href="/sport/football/english-championship/blackburn-v-wigan/29619519?gaZone=Main&amp;amp;gaTab=UG9wdWxhcg==&amp;amp;bssId=48350&amp;amp;bsmSt=1577130300000&amp;amp;bsmId=924.217161878&amp;amp;modules=betslip&amp;amp;gaMod=minimarketview&amp;amp;bseId=29619519&amp;amp;isSP=false&amp;amp;bsContext=REAL&amp;amp;action=addSelection&amp;amp;bsUUID=b6aa2daf38ef7fdfa20369ad99daf6d705818911&amp;amp;gaPageView=event&amp;amp;xsrftoken=821c3ad1-24ff-11ea-a6bc-fa163e7531ec&amp;amp;bsGroup=29619519" rel="nofollow" data-betslip-action="add-bet" data-loader=".multiples-bet-list" data-context="real" data-eventid="29619519" data-marketid="924.217161878" data-uuid="b6aa2daf38ef7fdfa20369ad99daf6d705818911" data-selectionid="48350" data-is-fctc="0"&gt;&lt;span class="ui-runner-price ui-924_217161878-48350 ui-display-decimal-price" id="yui_3_5_0_1_1577049074725_27045"&gt;
  1.8
  &lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I reload the page after a few minutes, then if I inspect the same DOM item again, the id changes, for example, it changes from id="yui_3_5_0_1_1577049074725_27043" to id="yui_3_5_0_1_1577049074725_45678", while the others are still the same.
  I want to get the element ID and make a web form, then use HTTP Post to submit the form, but the element IDs keep changing, I can’t submit the form.  I have to know the ID before I submit the form.
  First I tried to step through the JavaScript of the page, but it seems not easy, as some JavaScript is obviously to add something irrelevant, like the Google Analytic and Tag Manager, which if debug step by step in Google Chrome Develop Tools, it will take weeks or months before I can hit the line which generate the dynamic ID, but the form will stay there only a few days, then it is gone.  You don’t have enough time to debug it.
  But I can see the web link for the same DOM item is something like this:
  <a href="https://www.betfair.com/sport/football/english-championship/blackburn-v-wigan/29619519?gaZone=Main&amp;gaTab=UG9wdWxhcg==&amp;bssId=1&amp;bsmSt=1577130300&amp;bsmId=924.217317379&amp;modules=betslip&amp;gaMod=correct-score-markets&amp;bseId=29619519&amp;isSP=false&amp;bsContext=REAL&amp;action=addSelection&amp;bsUUID=21f4d0d51ce1f65f2667b8141dbc46815f1ba965&amp;gaPageView=event&amp;xsrftoken=821c3ad1-24ff-11ea-a6bc-fa163e7531ec&amp;bsGroup=29619519" rel="nofollow noreferrer">https://www.betfair.com/sport/football/english-championship/blackburn-v-wigan/29619519?gaZone=Main&amp;gaTab=UG9wdWxhcg==&amp;bssId=1&amp;bsmSt=1577130300&amp;bsmId=924.217317379&amp;modules=betslip&amp;gaMod=correct-score-markets&amp;bseId=29619519&amp;isSP=false&amp;bsContext=REAL&amp;action=addSelection&amp;bsUUID=21f4d0d51ce1f65f2667b8141dbc46815f1ba965&amp;gaPageView=event&amp;xsrftoken=821c3ad1-24ff-11ea-a6bc-fa163e7531ec&amp;bsGroup=29619519</a>
  For this web link, all the information remain the same except the UUID is different each time you visit it.  Therefore, I think the different yui ID# has some relationship with this UUID, but since I don’t know how to get the UUID, then I can’t figure out how to get the DOM ID#.  Debugging the JavaScript seems not a right solution.
  For this page, there are 100+ such DOM items, but I don’t need them all, I need only 5 to 10 of them, and as long as I find the necessary information before the web page disappears, I will use HTTP Post data to the web server.<br>
  Please advice on which direction I should go to figure out it.  Or at least to find out which JavaScript function is creating the DOM ID#, if any.
  I am thinking about generating a UUID, then visit the web link by replacing the UUID part of the web link, but not sure, if it will work or not.
  How I can find the id="yui_3_5_0_1_1577049074725_27043" the time I want to post the data to the server, actually, the only missing link is the last part of the id, which is 27043.
  Thanks,</p>