It`s not the best solution but maybe it is helpful for you to create your own solution.
function display_ads_form_element()
{
// get the total number of "advertising codes" from the database
// the default value is 1
$codes = array('1' => '' );
if( get_option('advertising_code') !== FALSE ) {
$codes = get_option('advertising_code');
}
?>
<?php /// button to add the new field // ?>
<input type="button" onClick="add_new_ad_code()" value="add new advertising code">
<ul id="advertising_code_list" >
<?php foreach($codes as $key => $code): ?>
<?php /// create for every "advertising code" an input field // ?>
<?php /// advertising_codes[key] => square brackets means the data will send as array // ?>
<?php /// data-listkey => is only an easy way that the js can detect the last key // ?>
<li><input type="text" name="advertising_code[<?php echo esc_attr( $key ); ?>]" value="<?php echo esc_attr( $code ); ?>" data-listkey="<?php echo esc_attr( $key ); ?>"/></li>
<?php endforeach; ?>
</ul>
<script>
function add_new_ad_code() {
// detect the last li element
const last_li = document.getElementById('advertising_code_list').lastElementChild;
// get the listKey from the input field
const new_key = parseInt(last_li.childNodes[0].dataset.listkey) + 1;
// create the new list tag
const li_element = document.createElement('li');
// create the new input tag for the new advertising code
const input_element = document.createElement('input');
// set the type
input_element.type = "text";
// set the name attribute
input_element.name = "advertising_code[" + new_key + "]";
// set empty value
input_element.value = "";
// add the new key as data attribute
input_element.dataset.listkey = new_key;
// add the new advertising code to the list element
li_element.appendChild(input_element);
// add the list element to the list
document.getElementById('advertising_code_list').appendChild(li_element);
}
</script>
<?php
}