Typed animation after AOS animation in javascript

I want to get the id name of an element of my find class. step 1: on function run get id of that element(working) step 2: (get the inner/child element and make an animation on that element. I want to animate the child's elements after finishing the parent's element. I make an animation on the bootstrap card(AOS) and then typed the body element (using typed.js) I want to use this keyword, I have a lot of cards, and giving and animating different IDs are difficult. I want if the parent's element is faded in then typed.js start typing.

therefore i want to know id of child element

my javascript code

document.addEventListener('aos:in:webdev', ({ detail }) => {
    iddd= detail.getAttribute("id");
    idd1=$(iddd).find(".write");

    idd2=$(idd1).attr("class");
    console.log(idd2);//(not getting id name) (giving undefined)
//    alert(iddd);
//    
    var typed = new Typed(idd2, {
        stringsElement: '#write-d-web',
        typeSpeed: 40,
        startDelay: 800,
        backDelay: 3500,
        loop:true,
        cursorChar:""
});
  

});

my html code

<div class="col-12 col-md-6 col-lg-6" data-aos="flip-left" data-aos id="webdev" id="abcd">
    <div class="box">
        <div class="icon" style="">
            <img src="img/devlp.png">
        </div>
        <h4 class="title"><a href="#!">web development</a></h4>
        <div class="write raj" id="write">
<!--          <p class="description">-->
            <p> studying tone of your brand to create a suitable website. 
            </p>
        </div>
        <p class="description" id="description-web"></p>    
        <a href="#!" class="`readmore`">Read More.....</a>
    </div>
</div>