Dynamic JQuery with Form Embed

Took me a bit to figure this out so I thought I'd share it.

I have a section on my form that's a dropdown. The selection made by the user automagically populates another dropdown fields value. Thanks to Jaime for helping me get that sorted out.
Here's an example of the code on the original form

<script type="text/javascript">
jQuery(document).ready(function($){
$(document).on('change', "select[name='item_meta[6789]']",
"select[name='item_meta[6796]']", function(){
var val1 = $("select[name='item_meta[6789]']").val();
var val2 = $("select[name='item_meta[6796]']").val();
$("select[name='item_meta[6796]']").val(val1);
});
});
</script>

However when I embedded the form into another form the above solution wouldn't function. After trial and error and inspect element I found that the Section ID, Field ID and a seperator are assigned to each field. Using the values and seperator from there - voila 🙂 here's the same piece with embed functionality ( note [Section_ID][0][Field_ID] ):

<script type="text/javascript">
jQuery(document).ready(function($){
$(document).on('change', "select[name='item_meta[6834][0][6789]']",
"select[name='item_meta[6834][0][6796]']", function(){
var val1 = $("select[name='item_meta[6834][0][6789]']").val();
var val2 = $("select[name='item_meta[6834][0][6796]']").val();
$("select[name='item_meta[6834][0][6796]']").val(val1);
});
});
</script>