JSFiddle - React, Tailwind, and code Playground

HTML

<i>There should be 2 labels and inputs below:</i>

<li>
    <ul class="new_option">
    </ul>
</li>

CSS

body {
    font-family: Arial, sans-serif;
}

li {
    list-style:none;
}

JavaScript

var inputphone = $("<li><label></label><br/><input type='tel' pattern='[0-9]{10}' class='added_phone' name='' value='' autocomplete='off' maxlength='20' /></li>");

var loopCount = 10;
var profileData = "Text for input";

$(loopCount).each(function(i) {
    console.log(' ');
    console.log('Phones: '+i);
    console.log(profileData[i].label);
    $('.new_option').append(inputphone); //<-- The Issue
    $('.added_phone').parent().find('label').text(profileData);
    $('.added_phone').attr('id', "added_phone" + i);
    $('.added_phone').attr('value', profileData);
});