I have form and Inside it inputs

Excuse me guys I have form and Inside it inputs and one of them it is add and remove inputs dynamically so When I add the inputs the content goes behind the send button so I need to make send button moving dynamically and make space inside form can You give some solution please knowing the design I had cloned it from one page and I tried to solve this issue but it does not work.. I need solution please.

Tray2

1 year ago

Level 73

I did something similar in a project a while back.

This is the markup

 <article id="track-one" class="p-2 text-center track">
            <label for="track_position" class="">Track:</label>
            <input type="text"
                   name="track_positions[]"
                   id="track_position"
                   class="bg-gray-700 focus:border-b-2 focus:border-amber-500 outline-none rounded-xl p-2 w-14"
                   maxlength="3"
                   onblur="convertToUppercase(event)"
            >
            <label for="track_title" class="col-span-1">Title:</label>
            <input type="text"
                   name="track_titles[]"
                   id="track_title"
                   class="w-7/12 bg-gray-700 focus:border-b-2 focus:border-amber-500 outline-none rounded-xl p-2"
                   onblur="convertToTitleCase(event)"
            >
            <label for="track_duration" class="">Length:</label>
            <input type="text"
                   name="track_durations[]"
                   id="track_duration"
                   placeholder="mm:ss"
                   class="w-1/12 bg-gray-700 focus:border-b-2 focus:border-amber-500 outline-none rounded-xl p-2 text-center"
                   maxlength="5">
            <img src="{{ asset('storage/remove.svg') }}"
                 alt="Remove Track"
                 class="w-6 inline cursor-pointer"
                 onclick="removeTrack(this)"
            >
        </article>
        <article class="mt-2 text-center">
           <span class="text-sm text-center border border-amber-100 rounded-lg py-1 px-2 leading-10 bg-gray-700 text-amber-100 hover:text-amber-300 hover:bg-gray-600"
                 onclick="addTrackNode()">
                 Add
           </span>
        </article>

This is the js.

 function getElement(selector) {
        return document.querySelector(selector);
    }

 function getElements(selector) {
        return document.querySelectorAll(selector);
    }


function addTrackNode() {
        let node = getElement('#track-one');
        let clone = node.cloneNode(true);
        let trackNode = getElements('.track');
        let last = trackNode[trackNode.length - 1];
        clone.id = `track-${trackNode.length + 1}`;
        last.after(clone);
        clone.focus();
    }

It adds tracks beneath each other.