Potential solution

The plan is to adjust the JavaScript function responsible for adding new address input fields so that it correctly adds a "-" (remove) button to all new address groups except the first one. The first address group should have the "+" (add) and "Show graph" buttons visible, while subsequent address groups should only display the "-" (remove) button. To achieve this, we will:

Modify the initial HTML template to include a "-" (remove) button for the first address input group but hide it using inline CSS.
Update the addAddressInput() JavaScript function to clone the last address input group and modify it to include only the "-" (remove) button.
Add JavaScript code to ensure that the "+" (add) and "Show graph" buttons are only visible for the first address input group, and the "-" (remove) button is visible for the rest.

Code

<!-- Initial address input group with hidden "-" button -->
<div class="input-group mb-3 addressInputGroup" th:each="address : ${addresses}">
    <input th:value="*{address}" type="text" class="form-control" placeholder="Bitcoin Address" aria-label="Bitcoin Address" aria-describedby="basic-addon2" required pattern=".*\S+.*" title="This field is required">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary addAddressField" type="button">+</button>
        <button class="btn btn-outline-secondary" type="submit">Show graph</button>
        <button class="btn btn-outline-danger remove-address" type="button" style="display: none;">-</button>
    </div>
</div>

function addAddressInput() {
    console.log('addAddressInput');
    const newInputGroup = $('.addressInputGroup').last().clone();
    newInputGroup.find('.input-group-append').empty();
    newInputGroup.find('input').val('');
    newInputGroup.find('.input-group-append').append('<button class="btn btn-outline-danger remove-address" type="button">-</button>');
    $('.addressInputGroup').last().after(newInputGroup);
    // Hide the "+" and "Show graph" buttons for all but the first address input group
    $('.addAddressField, .addressInputGroup .btn[type="submit"]').not(':first').hide();
    // Show the "-" button for all but the first address input group
    $('.remove-address').not(':first').show();
}

// Call this function once at the start to ensure the correct buttons are displayed
$(document).ready(function () {
    // ... existing code ...
    addAddressInput();
    // ... existing code ...
});

With the provided code, the initial state of the page will have the correct buttons displayed for the first address input group, and the addAddressInput() function will ensure that any additional address input groups have the appropriate "-" (remove) button. The "+" (add) and "Show graph" buttons will be hidden for all but the first address input group.

Changes on src/main/resources/templates/home.html

To address the issue described in the ticket, we need to modify the JavaScript code that dynamically adds the address input fields and the associated buttons. Specifically, we need to ensure that only the first address input group has the "+" (add) and "Show graph" buttons, while the subsequent address input groups should have a "-" (remove) button instead. Here's a practical proposal to solve the task: 1. Modify the JavaScript function `addAddressInput()` to always add a "-" (remove) button to the newly cloned input group. 2. Update the initial HTML template to include a "-" (remove) button for the first address input group, but hide it using inline CSS (`style="display: none;"`). This ensures that the "-" button is only visible for subsequent addresses. 3. Add a check in the JavaScript code to display the "+" (add) and "Show graph" buttons only for the first address input group. Here's the updated code snippet for the `addAddressInput()` function and the initial address input group: ```html

``` ```javascript function addAddressInput() { console.log('addAddressInput'); const newInputGroup = $('.addressInputGroup').last().clone(); newInputGroup.find('.input-group-append').empty(); newInputGroup.find('input').val(''); newInputGroup.find('.input-group-append').append(''); $('.addressInputGroup').last().after(newInputGroup); // Hide the "+" and "Show graph" buttons for all but the first address input group $('.addAddressField, .addressInputGroup .btn[type="submit"]').not(':first').hide(); // Show the "-" button for all but the first address input group $('.remove-address').not(':first').show(); } // Call this function once at the start to ensure the correct buttons are displayed $(document).ready(function () { // ... existing code ... addAddressInput(); // ... existing code ... }); ``` With these changes, when the page loads, the first address input group will have the "+" and "Show graph" buttons visible, and the "-" button hidden. When a new address input group is added, it will only have the "-" button visible. The JavaScript code ensures that the "+" and "Show graph" buttons are hidden for all subsequent address input groups.

maartenn / crypto-fiat-tracker

Remove plus and generate button on not first address #4

Potential solution

Code