How to "compress" repeating almost identical javascript / jQuery lines?

Question

I'm new to programming using javascript / jQuery and I managed to do the following work, but I'm sure there is a way to “compress” it in a few lines of code. I tried with everyone. but failed to work.

What this piece of code does: 1) You have some divs with “shortcuts” in them. 2) You save the custom header using localStorage through the inputs 3) The headers are updated

Here's jsFiddle for this too

the code:

<div id="theater-1" class="theater">theater 1</div>
<div id="theater-2" class="theater">theater 2</div>
<div id="theater-3" class="theater">theater 3</div>
<div id="theater-4" class="theater">theater 4</div>
<div id="theater-5" class="theater">theater 5</div>



1
<input type="text" id="theater_name_1" class="input-for-theater-title">
<button id="save-title-1">Save</button>
<br> 2
<input type="text" id="theater_name_2" class="input-for-theater-title">
<button id="save-title-2">Save</button>
<br> 3
<input type="text" id="theater_name_3" class="input-for-theater-title">
<button id="save-title-3">Save</button>
<br> 4
<input type="text" id="theater_name_4" class="input-for-theater-title">
<button id="save-title-4">Save</button>
<br> 5
<input type="text" id="theater_name_5" class="input-for-theater-title">
<button id="save-title-5">Save</button>


<button id="clear">Clear</button>

<script>
    var theater_1_saved_name = localStorage.getItem("theater_1_name");
    var theater_2_saved_name = localStorage.getItem("theater_2_name");
    var theater_3_saved_name = localStorage.getItem("theater_3_name");
    var theater_4_saved_name = localStorage.getItem("theater_4_name");
    var theater_5_saved_name = localStorage.getItem("theater_5_name");

    if (theater_1_saved_name !== null) {
        document.getElementById("theater-1").innerHTML = theater_1_saved_name;
        document.getElementById("theater_name_1").value = theater_1_saved_name;

    };
    if (theater_2_saved_name !== null) {
        document.getElementById("theater-2").innerHTML = theater_2_saved_name;
        document.getElementById("theater_name_2").value = theater_2_saved_name;
    };
    if (theater_3_saved_name !== null) {
        document.getElementById("theater-3").innerHTML = theater_3_saved_name;
        document.getElementById("theater_name_3").value = theater_3_saved_name;
    };
    if (theater_4_saved_name !== null) {
        document.getElementById("theater-4").innerHTML = theater_4_saved_name;
        document.getElementById("theater_name_4").value = theater_4_saved_name;
    };
    if (theater_5_saved_name !== null) {
        document.getElementById("theater-5").innerHTML = theater_5_saved_name;
        document.getElementById("theater_name_5").value = theater_5_saved_name;
    };


    $("#save-title-1").click(function () {
        var title_of_1 = $('#theater_name_1').val();
        localStorage.setItem("theater_1_name", title_of_1);
        $("#theater-1").text(title_of_1);
    });
    $("#save-title-2").click(function () {
        var title_of_2 = $('#theater_name_2').val();
        localStorage.setItem("theater_2_name", title_of_2);
        $("#theater-2").text(title_of_2);
    });
    $("#save-title-3").click(function () {
        var title_of_3 = $('#theater_name_3').val();
        localStorage.setItem("theater_3_name", title_of_3);
        $("#theater-3").text(title_of_3);
    });
    $("#save-title-4").click(function () {
        var title_of_4 = $('#theater_name_4').val();
        localStorage.setItem("theater_4_name", title_of_4);
        $("#theater-4").text(title_of_4);
    });

    $("#save-title-5").click(function () {
        var title_of_5 = $('#theater_name_5').val();
        localStorage.setItem("theater_5_name", title_of_5);
        $("#theater-5").text(title_of_5);
    });
    $("#clear").click(function () {
        localStorage.clear();
    });
</script>

Answer 1

Loops and string concatenation, find nin the changes below:

var n;
for (n = 1; n <= 5; ++n) {
    var theater_saved_name = localStorage.getItem("theater_" + n + "_name");
    if (theater_saved_name !== null) {
        document.getElementById("theater-" + n).innerHTML = theater_saved_name;
        document.getElementById("theater_name_" + n).value = theater_saved_name;
    }
    $("#save-title-" + n).click(function () {
        var title = $('#theater_name_' + n).val();
        localStorage.setItem("theater_" + n + "_name", title);
        $("#theater-" + n).text(title);
    });
}

JavaScript, HTML . , , , , JavaScript.

, HTML ( ) ; - index/:

jsFiddle (Stack Snippets , grrr)

HTML:

<div class="theater">theater 1</div>
<div class="theater">theater 2</div>
<div class="theater">theater 3</div>
<div class="theater">theater 4</div>
<div class="theater">theater 5</div>

1
<input type="text" class="input-for-theater-title">
<button class="save-title">Save</button>
<br>2
<input type="text" class="input-for-theater-title">
<button class="save-title">Save</button>
<br>3
<input type="text" class="input-for-theater-title">
<button class="save-title">Save</button>
<br>4
<input type="text" class="input-for-theater-title">
<button class="save-title">Save</button>
<br>5
<input type="text" class="input-for-theater-title">
<button class="save-title">Save</button>

<button id="clear">Clear</button>

JavaScript:

var theaters = $(".theater");
var inputs = $(".input-for-theater-title");
var buttons = $(".save-title");
theaters.each(function(index) {
    var name = localStorage.getItem("theater_" + index + "_name") || "";
    $(this).html(name);
    inputs.eq(index).val(name);
});
$(document.body).on("click", ".save-title", function() {
    var index = buttons.index(this);
    var title = inputs.eq(index).val();
    localStorage.setItem("theater_" + index + "_name", title);
    theaters.eq(index).text(title);
});