Question: I have multiple records, each with the same fields, they all have the same name/id, plus the RecordID. When I press cmdUpdate\_xxx I detect which record div, assigning it to 'fldTarget'. I know want to check each field (20, so don't want to do this manually) for validity. I've tried

```
$('#RecordsWrapper')
    .on("click" , "[id*=cmdUpdate]", "input", function(e){
      fldTarget = $(this);
      fldAccountID = fldTarget.parent().find("#txtAccountID").prop("id");`
    })

```

...but fldAccountID comes back as `undefined`. How can I locate a sub element with an ID that contains 'txtAccountID' under 'Record001' div?

```
<div id='RecordsWrapper'>
<div id='Record001'>
  <input type='text' id='txtAccount_001'>
  <input type='text' id='txtEntry_001'>
  <input type='text' id='txtValue_001'>
  <input type='submit' id='cmdUpdate_001'>
</div>
<div id='Record002'>
  <input type='text' id='txtAccount_002'>
  <input type='text' id='txtEntry_002'>
  <input type='text' id='txtValue_002'>
  <input type='submit' id='cmdUpdate_002'>
</div>
</div>

```

Answer: 
use attribute selector:

> 
> Attribute selectors
> ===================
> 
> 
> Attribute selectors select an element using the presence of a given attribute or attribute value.
> 
> 
> REF: <https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors>
> 
> 
> REF (more example here): <https://www.w3schools.com/css/css_attribute_selectors.asp>
> 
> 
> 

```js
$('input[id^=txtEntry]').css('background', 'green');

$('#RecordsWrapper')
  .on("click", "input[id^=cmdUpdate]", "input", function(e) {
    fldTarget = $(this);
    fldAccountID = fldTarget.parent().find("input[id^=txtAccount]").prop("id");
    console.log('fldAccountID-->' + fldAccountID);
  })
```

```css
input[id^=txtAccount] {
  background: red;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='RecordsWrapper'>
  <div id='Record001'>
    <input type='text' id='txtAccount_001'>
    <input type='text' id='txtEntry_001'>
    <input type='text' id='txtValue_001'>
    <input type='submit' id='cmdUpdate_001'>
  </div>
  <div id='Record002'>
    <input type='text' id='txtAccount_002'>
    <input type='text' id='txtEntry_002'>
    <input type='text' id='txtValue_002'>
    <input type='submit' id='cmdUpdate_002'>
  </div>
</div>
```
Since you already have the div for the current record stored in `fldTarget` can you parse the record ID from that div's own ID?

For example.

```
var recordID = fldTarget.prop('id').replace('Record', '');
var txtAccountID = 'txtAccount_' + recordID;

```

---

Or you could add a `data-*` attribute for each "record" div to hold contain the ID num like this:

```
<div id='Record001' data-id="001">
    <input type='text' id='txtAccount_001'>
    <input type='text' id='txtEntry_001'>
    <input type='text' id='txtValue_001'>
    <input type='submit' id='cmdUpdate_001'>
</div>
<div id='Record002' data-id="002">
    <input type='text' id='txtAccount_002'>
    <input type='text' id='txtEntry_002'>
    <input type='text' id='txtValue_002'>
    <input type='submit' id='cmdUpdate_002'>
</div>

```

And get the value from that attribute like this:

```
var recordID = fldTarget.data('id');
var txtAccountID = 'txtAccount_' + recordID;

```